javascript - Angular $watch 不触发数组更改

Question

我试图在 Angular 超时后触发 $watch:

我的 Controller

.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() 以应用更改。似乎不起作用。

这是 Fiddle例如。在这种情况下，我将不胜感激。谢谢!

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) 将使 watch 检查数组的全部内容。具体来说，它将使用 angular.equals 来检查新旧数组的相等性:

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