Angular $watch not triggering for array changes

Question

I'm attempting to trigger a $watch after a timeout in angular:

My Controller

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

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

Then the $watch is wired up in my directive's link function:

My Directive Link

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

The $watch only seems to fire once with the first four elements, it never fires after the fifth is added. I tried adding the $scope.$apply() there to apply the changes. Doesn't seem to be working.

Here's the Fiddle for the example. I'd appreciate any help in the situation. Thanks!

Tomdarkness · Accepted Answer · 2014-07-31 01:18:34Z

2

Change your directive like so:

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

The 3rd parameter (objectEquality) will make the watch check the whole contents of the array. Specifically it will use angular.equals to check the equality of the new and old array:

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

answered Jul 31, 2014 at 1:18

Tomdarkness

3,8202 gold badges23 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dan-Nolan Over a year ago

Ah there it is! Makes sense. Wouldn't want to do that all the time for performance purposes. Thank you.

Tomdarkness Over a year ago

Yeah, it will have a negative impact on performance. Especially if the array is large.

Collectives™ on Stack Overflow

Angular $watch not triggering for array changes

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related