$watch is triggered directly after init, why?

Question

Why does $watch trigger directly after page load and how can I prevent this?

function MyCtrl($scope) {
    // Init scope vars
    $scope.data_copy = {};

    // If data_copy changes...
    $scope.$watch("data_copy", function(newValue, oldValue) {

        alert("$watch triggered!");

    }, true);
}

This is also the case if you had a controller or directive which was initiated some time after page load. — Andrew, Aug 27 '14 at 06:48

Stewie · Answer 1 · 2014-01-31T16:35:39.800

49

On first run both values (newValue and oldValue) are equal, so you may easily escape it by checking for equality:

$scope.$watch("data_copy", function(newValue, oldValue) {
  if(newValue === oldValue){
    return;
  }
  alert("$watch triggered!");
});

PLUNKER

edited Jan 31 '14 at 16:35

answered Apr 08 '13 at 09:14

Stewie

60,366
20
146
113

1

Ahh, thanks! But can I really compare the two objects with ===, shouldn't I use something like underscore's _.isEqual(newValue, oldValue) ? – tidelipop Apr 08 '13 at 11:30
Probably, but I do already use underscore so I used that instead and it worked great. – tidelipop Apr 10 '13 at 21:59
@tidelipop Why you need _.isEqual, for $watch init, newValue oldValue will be the same. What's the initial value in your case ? – Huei Tan Apr 14 '14 at 09:52
9

Why does `$watch` even fire if `newValue === oldValue`? `$watch` is specifically designed to fire when those are NOT equal. – poshest May 23 '15 at 21:24
@poshest +1 - yes why is any of this necessary? – ajbraus Jul 25 '15 at 18:43
@poshest, on first change `oldValue==undefined` – Oct 02 '15 at 10:42

score 2 · Answer 2 · answered Jan 16 '17 at 13:37

Wrap $watch function into angular ready function.

angular.element(document).ready(function() 
{ 
  $scope.$watch("data_copy", function(newValue, oldValue) {
    alert("$watch triggered!");
  }, true);
})

When angular loads page. It changes values and $watch is triggered.

score 0 · Answer 3 · edited Jun 20 '20 at 09:12

0

There already have a very nice discussion in here:

How do I ignore the initial load when watching model changes in AngularJS?

$scope.$watch('fieldcontainer', function (new_fieldcontainer, old_fieldcontainer) {

if (typeof old_fieldcontainer === 'undefined') return;

// Other code for handling changed object here.

});

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 13 '15 at 10:35

SimonShyu

95
8

$watch is triggered directly after init, why?

3 Answers3

Linked