angular trigger changes with $watch vs ng-change, ng-checked, etc

Question

Currently we could monitor data changes with several ways. We could trigger model changes with $watch and we could add directives to elements and bind some actions to it.

It's a little bit confusing in many cases, so I'm curious, which is pro and cons of each variant and when should we use $watch binding, and when directives like ng-change?

Answer 1

Both $watch and ngChange have totally different usages:

Lets say you have a model defined on a scope:

$scope.myModel = [
    {
        "foo":"bar"
    }
];

Now if you want to do something whenever any changes happen to myModel you would use $watch:

$scope.$watch("myModel", function(newValue, oldValue){
    // do something
});

ngChange is a directive that would evaluate given expression when user changes the input:

<select ng-model="selectedOption" ng-options="option for option in options" 
ng-change="myModel=selectedOption"></select>

In short, you would normally bind ngChange to some HTML element. While $watch is for the models.

Answer 2

Code of ngChange directive:

var ngChangeDirective = valueFn({
  require: 'ngModel',
  link: function(scope, element, attr, ctrl) {
    ctrl.$viewChangeListeners.push(function() {
      scope.$eval(attr.ngChange);
    });
  }
});

Guess what, ngChange requires a controller from ngModel and executes the bound expression when the view is changed.

So it's like a helper that save you from doing tedious tasks like [$watch 'model' then do stuff].

On performance perspective, you have one less $watch expression to worry about.

Answer 3

Directives like ng-change are used for data-binding to DOM. $watch is used in your JS code to listen for changes.

When you need to have the DOM be affected by a change in your scope, or need to have a change in DOM (eg. field selection) affect the scope, you would use a directive.

If you need to trigger JavaScript actions from a change in scope, for example an ajax request, then you would use $watch in your controller (or service) to listen for the change.

Answer 4

If you want two-way data binding, then use ng-model. This pushes changes from model to view and from view to model -- two ways. However, if you just want one-way data binding from view to model, then use ng-change. If you want simple one way data binding from model to view, you can use an expression {{ like_this }}. But if you want a lot more control over how the model is rendered in the view, or if you want to bind the model to something other than the view, then use a $watch.