100字范文 > AngularJS：如何使用自定义指令来取代ng-repeat

AngularJS：如何使用自定义指令来取代ng-repeat

时间：2021-10-19 03:26:48

引言

本文主要介绍了另一种即具有与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以下的旧版本，是不支持的一次性绑定语法的。那么最好的方法就是自定义指令，换言之，静态数据可以使用一些简单的方法来格式化。

实现步骤

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

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

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

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

定义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函数

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

List格式化逻辑

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

如何获取分配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" 元素，则将以下数据渲染到列表行中。代码如下：