AngularJS使用自訂指令替代ng-repeat的方法_AngularJS

前言

大家都知道對於處理小數量，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。以上就是這篇文章的全部內容，希望本文的內容能對大家的學習或者工作有所協助，如果有疑問大家可以留言交流。