Uso de diretivas personalizadas no AngularJS para substituir ng-Método repeat

前言

大家都知道对于处理小数量，ng-repeat非常有用，但是如果需要处理非常大的数量集，还是采用自定义的方法更好一些。特别是数据大多都是静态的或已预存储好的，这个时候应避免使用ng-repeat指令。

ng-repeat中的表达式和 $watch

Angular中的表达式都会创建$watch 的Scope 函数。用于监听模型变化，当你的模型部分发生变化时它会通知你。在ng-repeat指令中，如果某行数据有15列数据都绑定了表达式，如果数据有1000多行的话，那么$watch就又奖金15000个，这性能简直难以想象。

所以当我们想要实现ng-repeat的功能又想兼备性能，那只能另找一种方法了。

替换ng-Método repeat

如果内容是静态的，我们不需要两种方式的绑定，只需要执行一次赋值语句{{::value}}就可以。如果anguluarJS是1.3以下的老版本，不支持一次性绑定语法。那么最好的方法就是自定义指令，换句话说，静态数据可以使用一些简单的方法来格式化。

实现步骤

1、首先创建无序列表，用于保存动态绑定的内容。

创建UL标签作为容器用于显示列表

我们选择动态加载List中的数据，首先添加div标签，并命名为"repeater-alternative"用于渲染流中。

<div>
 <ul>
  <div repeater-alternative></div>
 </ul>
</div>

2、定义List 数据：

//Exemplo de dados
var studentsList = 
[
 {
  FirstName: "Raj,
  LastName : "B",
  Country : "India",
  BirthDate: "01/01/1990"
 },
 {
  FirstName: "Kumar,
  LastName : "S",
  Country : "India",
  BirthDate: "01/01/1990"
 },
 ..................
 ..................
 ..................
 ..................
];
$scope.collectionObject = studentsList; //Atribuído à função $scope

3、Conteúdo real da lista

O objetivo principal é aplicar-se a conjuntos de objetos repetitivos e exibi-los na lista, portanto, é necessário definir a lógica de loop de acesso e formatar as strings conforme necessário.

var tableRow = "";
angular.forEach($scope.collectionObject, function (item) {
  tableRow = tableRow + ['<li>',
  '<div class="col-md-1">' + item.FirstName + '</div>
  '<div class="col-md-1 ">' + item.LastName + '</div>
  '<div class="col-md-1 ">' + item.Country+ '</div>
  '<div class="col-md-1 ">' + item.Id + '</div>
  '<div class="col-md-1 ">' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '</div>
  '</li>'].join('');
});

4、Lógica de formatação da lista

Quando o valor do collectionObject já foi atribuído a outra variável, é necessário definir a tabela para exibir os dados.

5、Como obter o tempo de atribuição do CollectionObject

O Angular monitora as mudanças no valor da variável $scope. Assim que o valor for modificado, o $watch será acionado, portanto, é necessário colocar a lógica de atribuição CollectionObject no $watch da variável $scope.

O código é o seguinte:

$scope.$watch($scope.object, function (oldValue, newValue) { 
})

Isso é, quando executamos a instrução de atribuição, o Angular processará o evento e formatará o conteúdo da lista.

$scope.$watch('collectionObject', function (oldValue, newValue) {
 var tableRow = "";
 angular.forEach($scope.collectionObject, function (item) {
  tableRow = tableRow + ['<li>',
  '<div class="col-md-1">' + item.FirstName + '</div>
  '<div class="col-md-1 ">' + item.LastName + '</div>
  '<div class="col-md-1 ">' + item.State + '</div>
  '<div class="col-md-1 ">' + item.Id + '</div>
  '<div class="col-md-1 ">' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '</div>
  '</li>'].join('');
 });
})

A seguir, renderize o conteúdo no controle de tabela, ou seja, <DIV>repeater-na tag "alternative".
Primeiro, é necessário entender o mecanismo de Directive do Angular, que, em termos simples, é indicar ao Angular para começar a executar operações no backend quando encontrar a variável especificada.

var userDirectives = angular.module([]);
userDirectives.directive('DOMElementFound', function () {
 return {
  replace: true,
  function ($scope, $elem, attrs) {
     //Operações de processamento no backend }
 }
});

Notificaremos o Angular quando encontrar "repeater-Se encontrar o elemento "alternative", renderize os seguintes dados na linha da lista.

O código é o seguinte:

var userDirectives = angular.module([]);
userDirectives.directive('repeaterAlternative', function () {
 return {
  replace : true,
  function ($scope, $elem, attrs) {
   $scope.$watch('collectionObject', function (oldValue, newValue) {
    var tableRow = "";
    angular.forEach($scope.collectionObject, function (item) {
     tableRow = tableRow + ['<li>',
         '<div class="col-md-1">' + item.FirstName + '</div>
         '<div class="col-md-1 ">' + item.LastName + '</div>
         '<div class="col-md-1 ">' + item.State + '</div>
         '<div class="col-md-1 ">' + item.Id + '</div>
         '<div class="col-md-1 ">' + $filter('date')(item.BirthDate, 'dd-MMM-yyyy') + '</div>
         '</li>'].join('');
    });
    //Se o IE for o seu navegador primário, é recomendado usar innerHTML para aumentar o desempenho
    $elem.context.innerHTML = tableRow;
    //Se o IE não for o seu navegador primário, apenas anexar o conteúdo ao elemento é suficiente .
    //$elem.append(tableRow);
   });
  }
 }
});

Resumo

Neste artigo, foi simulado principalmente ng-A maneira de trabalho e lógica de repeat, mas apenas para conteúdo estático, então o resultado da saída é idêntico ao chamado ng-O resultado de repeat é idêntico, mas renderiza mais rapidamente, pois este método tem apenas um tipo de ligação de dados e uma quantidade pequena de $watch. Este é o conteúdo total do artigo, esperamos que o conteúdo deste artigo ajude a aprendizagem ou trabalho de todos, se houver dúvidas, os amigos podem deixar comentários para trocar.

Tutoriais básicos