AngularJS how do I watch $viewValue instead of ngModel?
The docs have the answer: https://code.angularjs.org/1.2.19/docs/api/ng/type/ngModel.NgModelController
You want to use $viewChangeListeners
instead of $watch
like so (you might need to push to $formatters
instead depending on how debounce works):
ngModelCtrl.$viewChangeListeners.push(function(){
var val = parseInt(ngModelCtrl.$viewValue);
if(!isNaN(val)) {
...
}
});
Though I haven't played with the debounce option yet so I don't know if this will fix your problem, but this is how you watch the viewValue.
An alternative solution of watching the $viewValue is to allow invalid ng-model updates, then you can watch the model instead.
ng-model-options="{allowInvalid: true}"
see: https://docs.angularjs.org/api/ng/directive/ngModelOptions
It's not a direct answer to this question, but I think it will help in many of the usecases for which people are visiting this topic.
This will watch the $viewValue of a ngModelController if the tag has the ng-model and match attribute. It is also possible to watch other ngModelController $viewValues, like in a form with many input directives.
(function () {
'use strict';
angular
.module('app.commons')
.directive('match', MatchValidator);
function MatchValidator() {
return {
require: 'ngModel',
link: LinkFunction
};
function LinkFunction(scope, element, attrs, ngModel) {
scope.$watch(function(){
return ngModel.$viewValue;
},
function(newValue, oldValue){
// do something
}
);
}
}
})();