Uso de directivas personalizadas en AngularJS para reemplazar ng-Métodos de repeat

前言

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

ng-repeat中的表达式和 $watch

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

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

替换ng-Métodos de repeat

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

实现步骤

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

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

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

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

2、定义List 数据：

//ejemplo de datos
var studentsList = 
[
 {
  FirstName: "Raj,
  LastName : "B",
  Country : "India",
  BirthDate: "0"1/01/199"0"
 },
 {
  FirstName: "Kumar,
  LastName : "S",
  Country : "India",
  BirthDate: "0"1/01/199"0"
 },
 ..................
 ..................
 ..................
 ..................
];
$scope.collectionObject = studentsList; //分配给 $scope 函数

3、实际 List 内容

主要目的适用于重复集合对象，并显示到列表中，因此需要制定访问循环的逻辑，并按照需求来格式化字符串。

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、List 格式化逻辑

一旦 collectionObject 的值已被赋给其他变量，就需要定义显示数据的表格。

5、如何获取分配 CollectionObject 的时间

Angular会监控 $scope 变量的值改变，一旦值被修改，则 $watch 将被触发，因此需要将 CollectionObject 赋值逻辑放到 $scope 变量的 $watch 中。

以下代码：

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

即，当我们执行赋值语句时，Angular会处理这个事件，并格式化List的内容。

$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('');
 });
})

接下来就是将内容渲染到表格控件中，也就是HTML<DIV>repeater-在 "alternative" 标签中。
首先必须理解Angular的Directive机制，简单而言，就是我们来指示Angular，当指定的变量被发现，就开始执行后台操作。

var userDirectives = angular.module([]);
userDirectives.directive('DOMElementFound', function () {
 return {
  replace: true,
  function ($scope, $elem, attrs) {
     //后台处理操作  }
 }
});

我们将通知Angular，当发现 "repeater-如果存在 "alternative" 元素，则将以下数据渲染到列表行中。

以下代码：

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('');
    });
    //Si IE es su navegador principal, se recomienda innerHTML para aumentar el rendimiento
    $elem.context.innerHTML = tableRow;
    //Si IE no es su navegador principal, solo es suficiente agregar el contenido al elemento.
    //$elem.append(tableRow);
   });
  }
 }
});

Resumen

En este artículo, se simula principalmente ng-La forma de trabajo y la lógica de repeat, pero solo se limita al contenido estático, por lo que el resultado de la salida es el mismo que el de llamar a ng-El resultado de repeat es idéntico, pero se renderiza más rápido, porque este método tiene solo una forma de enlace de datos y una cantidad mínima de $watch. Esto es todo el contenido de este artículo, espero que el contenido de este artículo pueda ayudarles en su aprendizaje o trabajo, si tienen alguna pregunta, pueden dejar un mensaje para intercambiar.

Tutoriales básicos

Te gustará