angular trigger changes with $watch vs ng-change, ng-checked, etc
Solution 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.
Solution 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.
Solution 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.
Solution 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
.