watching array changes inside Angular controller and update HTML

Question

I want to watch an array changes inside Angular controller and update HTML view.

this is my controller:

app.controller("timelineCtrl", function ($scope) {
    $scope.arr=[];
         .
         .
         .
}

this is my directive:

app.directive('helloWorld', function() {
    return {
        restrict: 'AE',
        replace: true,
        template: '<div> Hello {{arrayItem}} </div>',

        link: function ($scope, element, attrs) {

            $scope.$watch($scope.arr, function(newValues, oldValues) {
                $scope.arrayItem = newValues;
            });

        }
    };
});

I add some new values to array via button click but my $watch doesn't work. How can i overcome this?

@vinayakj why wouldn't it be?

charlietfl
– charlietfl

2015-07-19 20:19:40 +00:00
Commented Jul 19, 2015 at 20:19 — charlietfl
– charlietfl, Commented Jul 19, 2015 at 20:19

doldt · Accepted Answer · 2015-07-21 17:26:06Z

Currently your watch is not firing because the $scope.arr variable contains the same reference - a reference to the same array as initially, only the values contained in this array have now changed. (This is because arrays in javascript are passed by reference only, as opposed to primitives which are always copied)

If you want watch to go "deeper" than just checking this reference, and look for changes in the object's contents too, you can add a third, boolean param with a true value, as such:

$scope.$watch(
   '$scope.arr', //expression to watch - can also be a function returning a value
   function(newValues, oldValues) { //function to run on change
     $scope.arrayItem = newValues;
   },
   true //deep watch mode?
);

Do note that watching "deep" can be very expensive, as it will check every last property of every embedded object. If you just want to watch whether an element was removed or added to an array, you can use $watchCollection, which only watches shallow, 1 level down, and has much better performance.

Pankaj Parkar · Accepted Answer · 2015-07-19 20:20:26Z

0

You should place deep watch of array by adding true after the function, that will do deep watch on the variable, any of the element changed inside watch will fire function

Markup

<hello-world arr="arr" ></hello-world>

Code

$scope.$watch(attrs.arr, function(newValues, oldValues) {
     $scope.arrayItem = newValues;
}, true);

edited Jul 19, 2015 at 20:20

answered Jul 19, 2015 at 20:14

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Collectives™ on Stack Overflow

watching array changes inside Angular controller and update HTML

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related