AngularJS使用自定义指令替代ng-repeat的方法

前言

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

ng-repeat中的表达式和 $watch

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

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

替换ng-repeat的方法

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

实现步骤

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

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

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

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

2、定义list 数据：

//示例数据
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; //分配给$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,
  link: function ($scope, $elem, attrs) {
     //后台处理操作  }
 }
});

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

代码如下：

var userdirectives = angular.module([]);

userdirectives.directive('repeateralternative', function () {
 return {
  replace : true,
  link: 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('');
    });

    
    //if ie is your primary browser, innerhtml is recommended to increase the performance
    $elem.context.innerhtml = tablerow;
    //if ie is not your primary browser, just appending the content to the element is enough .
    //$elem.append(tablerow);
   });
  }
 }
});

总结

在本文中，主要模拟了ng-repeat的工作方式和逻辑，但只限于静态内容，所以输出结果与调用ng-repeat结果相同，但是渲染更快，因为该方法只有一种数据绑定方式和少量的$watch。以上就是这篇文章的全部内容，希望本文的内容能对大家的学习或者工作有所帮助，如果有疑问大家可以留言交流。