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()来应用更改。似乎没有用。

这是示例中的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);
}

第3个参数（objectEquality）将使手表检查数组的全部内容。具体来说，它将使用angular.equals来检查新旧数组的相等性：

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

Angular $ watch不会触发数组更改

1 个答案: