angularjs : watch of array has been triggered when the array in initial load and not being changed

Question

               <div class="category">
                  <div ng-dropdown-multiselect="" options="categories" selected-model="selectedCategories" extra-settings="categoriesSettings" translation-texts="customTexts"></div>
                </div>

  $scope.$watch('selectedCategories', function(newValue, oldValue){
    console.log(newValue);
    console.log(oldValue);
    $scope.loadPosts();
  }, true);

  $scope.$watch('selectedCities', function(newValue, oldValue) {
    console.log(newValue);
    console.log(oldValue);
    $scope.loadPosts();
  }, true);

These two watches have been triggered when the page is initially loaded. Isn't it supposed not to trigger when the page is loading and the array not being changed?

kozlice · Accepted Answer · 2015-03-14 23:42:59Z

1

That's correct watcher's behavior. Adding if (angular.equals(newValue, oldValue)) { return; } inside callback will solve your issue.

answered Mar 14, 2015 at 23:42

kozlice

7248 silver badges12 bronze badges

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

Comments

Dan Mindru · Accepted Answer · 2015-03-14 23:41:58Z

1

From the Angular Docs (just before the first example)

After a watcher is registered with the scope, the listener fn is called asynchronously (via $evalAsync) to initialize the watcher. In rare cases, this is undesirable because the listener is called when the result of watchExpression didn't change. To detect this scenario within the listener fn, you can compare the newVal and oldVal. If these two values are identical (===) then the listener was called due to initialization.

You could check if newValue !== oldValue to prevent it or create a variable that prevents the first check.

answered Mar 14, 2015 at 23:41

Dan Mindru

6,1244 gold badges30 silver badges42 bronze badges

Collectives™ on Stack Overflow

angularjs : watch of array has been triggered when the array in initial load and not being changed

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