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> <divrepeater-alternative></div> </ul> </div>
2、定义List数据：
//示例数据
varstudentsList=
[
{
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内容
主要目的适用于重复集合对象，并显示到列表中，所以需要制定访问循环的逻辑，并按照需求来格式化字符串。
vartableRow="";
angular.forEach($scope.collectionObject,function(item){
tableRow=tableRow+['<li>',
'<divclass="col-md-1">'+item.FirstName+'</div>',
'<divclass="col-md-1">'+item.LastName+'</div>',
'<divclass="col-md-1">'+item.Country+'</div>',
'<divclass="col-md-1">'+item.Id+'</div>',
'<divclass="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){
vartableRow="";
angular.forEach($scope.collectionObject,function(item){
tableRow=tableRow+['<li>',
'<divclass="col-md-1">'+item.FirstName+'</div>',
'<divclass="col-md-1">'+item.LastName+'</div>',
'<divclass="col-md-1">'+item.State+'</div>',
'<divclass="col-md-1">'+item.Id+'</div>',
'<divclass="col-md-1">'+$filter('date')(item.BirthDate,'dd-MMM-yyyy')+'</div>',
'</li>'].join('');
});
})
接下来就是将内容渲染到表格控件中，也就是HTML<DIV>repeater-alternative标签中。
首先必须理解Angular的Directive机制，简单而言，就是我们来指示Angular,当指定的变量被发现，就开始执行后台操作。
varuserDirectives=angular.module([]);
userDirectives.directive('DOMElementFound',function(){
return{
replace:true,
link:function($scope,$elem,attrs){
//后台处理操作}
}
});
我们会通知Angular，当发现"repeater-alternative"元素，则将以下数据渲染到列表行中。
代码如下：
varuserDirectives=angular.module([]);
userDirectives.directive('repeaterAlternative',function(){
return{
replace:true,
link:function($scope,$elem,attrs){
$scope.$watch('collectionObject',function(oldValue,newValue){
vartableRow="";
angular.forEach($scope.collectionObject,function(item){
tableRow=tableRow+['<li>',
'<divclass="col-md-1">'+item.FirstName+'</div>',
'<divclass="col-md-1">'+item.LastName+'</div>',
'<divclass="col-md-1">'+item.State+'</div>',
'<divclass="col-md-1">'+item.Id+'</div>',
'<divclass="col-md-1">'+$filter('date')(item.BirthDate,'dd-MMM-yyyy')+'</div>',
'</li>'].join('');
});
//IfIEisyourprimarybrowser,innerHTMLisrecommendedtoincreasetheperformance
$elem.context.innerHTML=tableRow;
//IfIEisnotyourprimarybrowser,justappendingthecontenttotheelementisenough.
//$elem.append(tableRow);
});
}
}
});
总结
在本文中，主要模拟了ng-repeat的工作方式和逻辑，但只限于静态内容，所以输出结果与调用ng-repeat结果相同，但是渲染更快，因为该方法只有一种数据绑定方式和少量的$watch。以上就是这篇文章的全部内容，希望本文的内容能对大家的学习或者工作有所帮助，如果有疑问大家可以留言交流。