I'm encountering an issue with ngModel.NgModelController.$parsers. Let me explain with an example: I have created a directive for an input field. Whenever I change the value in this input in the HTML, it should call my specified function.
The registered function is supposed to always change whatever is written in the input field to the character 'A', but modify the model.
html file:
<div ng-app="myApp">
<form>
<input ng-model="myval1" somedir/>
</form>
</div>
and js file:
var myApp = angular.module('myApp', []);
myApp.directive("somedir", function(){
return {
restrict:'A',
require: '?ngModel',
link: function(scope, element, attrs, ngModelController) {
ngModelController.$parsers.unshift(function(val){
console.log("i'm here");
ngModelController.$viewValue ="A";
ngModelController.$render();
return val;
});
}
}
});
I have prepared a jsfiddle for testing:
angular 1.2.9 : http://jsfiddle.net/hwzxfon3/1/
angular 1.4.7 : http://jsfiddle.net/372re41m/1/
In angular 1.2.9, it works correctly. However, in angular 1.4.7, there seems to be a problem. Here's how to reproduce it:
focus on the input field and press the same button (e.g. '1') three times.
The first two times, it should show 'A' in the input field and in the browser console it should display i'm here.
However, on the third press, it displays 'A' followed by the pushed character (e.g. 'A1') and doesn't log i'm here in the browser console, indicating that the registered function wasn't called.
Could you please let me know if there's a bug in my code (and suggest changes) or if it's a bug in Angular (in which case, I will report it to the Angular team)? I have tested it in the latest versions of Chrome and Safari on OS X (10.10.5). If it works fine for you, please mention that as well.