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

更新時間：2016年09月17日 15:48:25 投稿：daisy

這篇文章主要介紹了另一種即具有與ng-repeat一樣處理大量數(shù)據(jù)的綁定的功能，又具有超高性能的自定義方法，有需要的小伙伴們可以參考借鑒，下面來一起看看吧。

前言

大家都知道對于處理小數(shù)量，ng-repeat是非常有用的，但是如果需要處理非常大的數(shù)量集，還是采用自定義的方法更好一些。特別是數(shù)據(jù)大多都是靜態(tài)的或已預存儲好的，這個時候應避免使用ng-repeat指令。

ng-repeat中的表達式和 $watch

Angular中的表達式都會創(chuàng)建$watch 的Scope 函數(shù)。用于監(jiān)聽模型變化，當你的模型部分發(fā)生變化時它會通知你。在ng-repeat指令中，如果某行數(shù)據(jù)有15列數(shù)據(jù)都綁定了表達式，如果數(shù)據(jù)有1000多行的話，那么$watch就又獎金15000個，這性能簡直難以想象。

所以當我們想要實現(xiàn)ng-repeat的功能又想兼?zhèn)湫阅?，那只能另找一種方法了。

替換ng-repeat的方法

如果內容是靜態(tài)的，我們不需要兩種方式的綁定，只需要執(zhí)行一次賦值語句{{::value}}就可以。如果anguluarJS是1.3以下的舊版本，是不支持的一次性綁定語法的。那么最好的方法就是自定義指令，換言之，靜態(tài)數(shù)據(jù)可以使用一些簡單的方法來格式化。

實現(xiàn)步驟

1、首先創(chuàng)建無序列表，用于保存動態(tài)綁定的內容。

創(chuàng)建UL標簽作為容器用于顯示列表

我們選擇動態(tài)加載List中的數(shù)據(jù)，首先添加div標簽，并命名為"repeater-alternative"用于渲染流中。

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

2、定義List 數(shù)據(jù)：

//示例數(shù)據(jù)
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函數(shù)

3、實際List內容

主要目的適用于重復集合對象，并顯示到列表中，所以需要制定訪問循環(huán)的邏輯，并按照需求來格式化字符串。

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的值已被賦給其他變量，就需要定義顯示數(shù)據(jù)的表格。

5、如何獲取分配CollectionObject的時間

Angular會監(jiān)控$scope變量值得改變，一旦值被修改，則$watch將被處罰，所以需要將CollectionObject賦值邏輯放到$scope變量的$watch中。

代碼如下：

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

即，當我們執(zhí)行賦值語句是，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,當指定的變量被發(fā)現(xiàn)，就開始執(zhí)行后臺操作。

var userDirectives = angular.module([]);

userDirectives.directive('DOMElementFound', function () {
 return {
  replace: true,
  link: function ($scope, $elem, attrs) {
     //后臺處理操作  }
 }
});

我們會通知Angular，當發(fā)現(xiàn)"repeater-alternative" 元素，則將以下數(shù)據(jù)渲染到列表行中。

代碼如下：

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的工作方式和邏輯，但只限于靜態(tài)內容，所以輸出結果與調用ng-repeat結果相同，但是渲染更快，因為該方法只有一種數(shù)據(jù)綁定方式和少量的$watch。以上就是這篇文章的全部內容，希望本文的內容能對大家的學習或者工作有所幫助，如果有疑問大家可以留言交流。

您可能感興趣的文章: