我可以阻止AngularJS完全重建DOM的重複部分嗎？

考慮下面這個簡單的模塊和控制器：我可以阻止AngularJS完全重建DOM的重複部分嗎？

var t = angular.module("test", []); 
t.controller("TestCtrl", function ($scope, $timeout) { 

    $scope.arr = [ 
     "elem1", 
     "elem2", 
     "elem3" 
    ]; 

    $scope.getDate = function() { 
     return +new Date(); 
    }; 

    $timeout(function() { 
     $scope.arr[2] = "< I should have a different timestamp to the two above me now"; 
    }, 2000); 
});

而下面這個簡單的模板：

<ul ng-app="test" ng-controller="TestCtrl"> 
    <li ng-repeat="x in arr">{{getDate()}} {{arr[$index]}}</li> 
</ul>

有沒有一種方法，我可以讓ng-repeat指令只更新DOM中的必要元素，而比在模型的arr屬性中的單個值更改時重新構建整個li元素集？

我希望能夠呈現該列表，以便在超時後修改第3個元素時，前2個元素的時間戳不會更改。

這裏是a fiddle包含上面的例子。

編輯：請注意，此示例中的時間戳僅用於演示此問題。由於Angular每次都會重新創建DOM節點的數量，因此我的真實代碼要複雜得多，並且會遇到性能問題。在這種情況下，將時間戳添加到模型不是解決方案。

來源

2013-05-20 James Allardice

也許你可以把時間戳記保存在你的'arr'中？ – akonsu

@akonsu - 時間戳只是爲了證明這個問題。由於Angular每次都會重新創建DOM節點的數量，因此我的真實代碼要複雜得多，並且會遇到性能問題。 –

我現在明白了。鑑於angularjs沒有這種優化，我看到的唯一方法是將您的數據分割成幾部分。與服務器上的數據分片相同的想法。 – akonsu

做到這一點的一種方法是將時間戳記作爲模型屬性。

這裏是我做了什麼

http://jsfiddle.net/vx2c3/2/

<ul ng-app="test" ng-controller="TestCtrl"> 
    <li ng-repeat="x in arr" ng-init="t=getDate()">{{getDate()}} and {{t}} {{arr[$index]}}</li> 
</ul>

如果您在觀看者的表情，基本上是建立一個模型屬性t

來源

2013-05-20 15:01:20 Chandermani

謝謝，但這不會在這種情況下有所幫助。查看編輯並對問題發表評論。 –

（一{{curly-brace}}表達不過是一個守望者）返回一個不同的值（花括號觀察者用戶嚴格相等（===）來檢測變化），每當它被調用時，您將始終爲看到他們更新。

如果您想解決您必須重新計算觀察器表達式之外的這些表達式作爲對更有意義的事件的響應。

以您的getDate()爲例，您將將以某種方式包含在您的模型中。例如，您可以有一個單獨的數組，它存儲原始數組的每個索引的日期並同時更新這兩個數組。

來源

2013-05-20 15:09:26 Jan

我可以阻止AngularJS完全重建DOM的重複部分嗎？

回答

相關問題