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

Question

給出以下簡單的模塊和控制器：

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中的必要元素，而不是重建整個li元素集，當模型的arr屬性中的單個值發生變化時？

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

這是一個包含上述例子的小提琴 。

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

Answer 1

一種方法是將時間戳設為模型屬性。

這就是我做的

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

Answer 2

如果在觀察者中包含一個表達式（ {{curly-brace}}表達式只是一個觀察者），每次調用時都會返回一個不同的值（大括號觀察者用戶嚴格相等（ === ）來檢測變化），你總會看到他們更新。

如果你想修復它，你必須在觀察者表達式之外重新計算這些表達式，作為對一些更有意義的事件的響應。

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