Angular $watch 未触发数组更改答案

【问题标题】：Angular $watch not triggering for array changesAngular $watch 未触发数组更改
【发布时间】：2014-09-22 20:10:39
【问题描述】：

我正在尝试在角度超时后触发 $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() 以应用更改。好像没用。

这里是 Fiddle 的示例。在这种情况下，我将不胜感激。谢谢！

【问题讨论】：

标签： javascript angularjs

【解决方案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

【讨论】：

啊，就是这样！说得通。出于性能目的，不想一直这样做。谢谢。
是的，它会对性能产生负面影响。特别是如果数组很大。