To monitor the change of a value in a customized directive, I am utilizing the $parsers unshift-function to incorporate my own function.
Unfortunately, my custom function is not being triggered!
Below is the code snippet for my view:
<div ng-controller="MyCtrl">
<form novalidate name="myForm">
Number: <even-number name="awesomeField" ng-model="val"></even-number>
</form>
</div>
This is my JavaScript code:
var myApp = angular.module('myApp',[]);
function MyCtrl($scope) {
$scope.val = "42";
$scope.$watch('val', function() {
console.log("Controller: "+$scope.val);
});
}
myApp.directive('evenNumber', function(){
var tmplt = ''+
'<div class="input-group">'+
'<input class="form-control" name="inputDate" type="text" data-ng-model="ngModel"/>'+
'<span class="input-group-btn">'+
'<button class="btn btn-default">Default</button>'+
'</span>'+
'</div>';
return {
restrict: 'E',
require:'ngModel',
replace: true,
template: tmplt,
scope: {
ngModel: "="
},
link: function(scope, elem, attrs, ctrl){
ctrl.$parsers.unshift(checkValue);
function checkValue(viewValue){
console.log("halllllo");
return viewValue;
}
} // end link
}; // end return
});
Any idea on what could be causing this issue?
See the complete scenario in this jsFiddle