AngularJS $watch vs $watchCollection: which is better for performance?

by

$watch() will be triggered by:

$scope.myArray = [];
$scope.myArray = null;
$scope.myArray = someOtherArray;

$watchCollection() will be triggered by everything above AND:

$scope.myArray.push({}); // add element
$scope.myArray.splice(0, 1); // remove element
$scope.myArray[0] = {}; // assign index to different value

$watch(…, true) will be triggered by EVERYTHING above AND:

$scope.myArray[0].someProperty = "someValue";

JUST ONE MORE THING…

$watch() is the only one that fires when an array is replaced with another with the same exact content. For example:

$scope.myArray = ["Apples", "Bananas", "Orange" ];

var newArray = [];
newArray.push("Apples");
newArray.push("Bananas");
newArray.push("Orange");

$scope.myArray = newArray;

Below is a link to an example JSFiddle that uses all the different watch combinations and outputs log messages to indicate which “watches” were triggered:

http://jsfiddle.net/luisperezphd/2zj9k872/

More Related Contents:

  1. ‘this’ vs $scope in AngularJS controllers
  2. What is the difference between ‘@’ and ‘=’ in directive scope in AngularJS?
  3. How do I use $scope.$watch and $scope.$apply in AngularJS?
  4. AngularJS : Prevent error $digest already in progress when calling $scope.$apply()
  5. If you are not using a .(dot) in your AngularJS models you are doing it wrong?
  6. How do I access the $scope variable in browser’s console using AngularJS?
  7. When writing a directive in AngularJS, how do I decide if I need no new scope, a new child scope, or a new isolated scope?
  8. AngularJS access scope from outside js function
  9. How do I inject a controller into another controller in AngularJS
  10. Sending event when AngularJS finished loading
  11. Confused about Angularjs transcluded and isolate scopes & bindings
  12. Rendering directives within $sce.trustAsHtml
  13. How do I ignore the initial load when watching model changes in AngularJS?
  14. Get value when selected ng-option changes
  15. AngularJS: ng-repeat list is not updated when a model element is spliced from the model array
  16. AngularJS : $q -> deferred API order of things (lifecycle) AND who invokes digest?
  17. angularJS: How to call child scope function in parent scope
  18. AngularJS : ng-repeat filter when value is greater than
  19. angularjs share data config between controllers
  20. How to modify scope from within a directive in AngularJs
  21. Angular scope function executed multiple times
  22. Why is using if(!$scope.$$phase) $scope.$apply() an anti-pattern?
  23. How to trigger a method when Angular is done adding scope updates to the DOM?
  24. Model in a modal window in angularjs is empty
  25. AngularJS controller inheritance
  26. AngularJS – Filter empty objects
  27. Why ng-scope is added to javascript inline of my partial view and makes alert not working?
  28. How to detect browser using angularjs?
  29. AngularJS: How to nest applications within an angular app
  30. Access Parent Scope in Transcluded Directive

Leave a Comment