角$ watch不觸發數組更改

Question

我試圖在角度超時后觸發$ watch：

我的控制器

.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.chickens = ["Jim", "Joe", "Fred"];
    $scope.chickens.push("Steve");

    setTimeout(function () {
        $scope.chickens.push("Larry");
        $scope.$apply();
    }, 500);
}])

然后，將$ watch連接到我的指令的鏈接函數中：

我的指令鏈接

link: function (scope, element, attrs) {
    scope.$watch('chickens', function (newChickens, oldChickens) {
        $(element).html('');
        newChickens.forEach(function (chicken) {
            $(element).append($('<li/>', {
                'text': chicken
            }));
        });
    });
}

$ watch似乎只對前四個元素觸發一次，而在添加第五個元素后就不會觸發。 我嘗試在其中添加$scope.$apply()以應用更改。 似乎沒有用。

這是示例的小提琴 。 在這種情況下，我將不勝感激。 謝謝！

Answer 1

像這樣更改您的指令：

link: function (scope, element, attrs) {
    scope.$watch('chickens', function (newChickens, oldChickens) {
        $(element).html('');
        newChickens.forEach(function (chicken) {
            $(element).append($('<li/>', {
                'text': chicken
            }));
        });
    }, true);
}

第三個參數（ objectEquality ）將使手表檢查數組的整個內容。 具體來說，它將使用angular.equals檢查新數組和舊數組的相等性：

https://docs.angularjs.org/api/ng/function/angular.equals