How to create custom directive to listen to input changes

Question

Hi Here I wrote a custom directive. That directive need to call for each time when value changed. Here is my directive. How can I call in ng-change.here is my directive.

app.directive('percentageFormatter', function() { return { require: 'ngModel', link: function(scope, element, attrs, ngModelController) { ngModelController.$parsers.push(function(data) { //convert data from view format to model format return data.replace('%',''); }); ngModelController.$formatters.push(function(data) { //convert data from model format to view format return data+'%'; }); } } });

JSP:-

<input type="text" percentage-formatter ng-model="tea">

Here How to call that directive in ng-change.

Why you need to call the directive in ng-change. This is not possible, you can't do that. The directive itself can watch and update ngmodel values, not needed ng-change here i think. — digit
– digit, Commented Mar 13, 2017 at 12:06
$watch will gets more calls even if I dont chenged value, call will go — Shiva Goud A
– Shiva Goud A, Commented Mar 13, 2017 at 12:08

Abdullah Al Noman · Accepted Answer · 2017-03-13 12:27:53Z

$scope.watch function watches for changes in values . Add this to your directive

 $scope.$watch(function () { // do soething });

or you can below one use as well .

 element.bind('keypress', function(event) { if(event.keyCode === 32) { event.preventDefault(); } });

This is how I would create my percentage formater

angular.module('test') .directive('percentageFormatter', function() { return { require: '?ngModel', link: function(scope, element, attrs, ngModelCtrl) { if(!ngModelCtrl) { return; } ngModelCtrl.$parsers.push(function(val) { if (angular.isUndefined(val)) { val = ''; } var clean = val.replace("%", ''); if (val !== clean) { ngModelCtrl.$setViewValue(clean); ngModelCtrl.$render(); } return clean; }); element.bind('keypress', function(event) { if(event.keyCode === 32) { event.preventDefault(); } }); } }; });

It seems like you are removing percentage sign, But I need to add percentage sign to value

rrd · Accepted Answer · 2017-03-13 12:03:35Z

My first thought runs to using $watch():

app.directive('percentageFormatter', function() { return { require: 'ngModel', link: function(scope, element, attrs, ngModelController) { scope.$watch( () => ngModelController.$modelValue, (newval) => { // Do your stuff here - the value has changed! } ); } );

digit · Accepted Answer · 2017-03-13 12:18:38Z

Directly call change event in the directive .Try this

app.directive('percentageFormatter', function() { return { require: 'ngModel', link: function(scope, element, attrs, ngModelController) { element.bind('change', function () { ngModelController.$setViewValue(element.val()); ngModelController.$render(); }); } } });

georgeawg · Accepted Answer · 2017-03-14 18:10:30Z

How can I call in ng-change.here is my directive.

Under the hood¹ the ng-change directive uses the ngModelController.$viewChangeListeners API. The percentageFormatter directive can do the same:

ngModelController.$viewChangeListeners.push(function myChange() { //Do things as if called by ng-change });

The myChange function is only evaluated when a change in the input value causes a new value to be committed to the model.

It will not be evaluated:

if the value returned from the $parsers transformation pipeline has not changed
if the input has continued to be invalid since the model will stay null
if the model is changed programmatically (from a controller vs user input)

This gives an authentic "ng-change" functionality to the directive without adding additional watchers or event listeners.

Collectives™ on Stack Overflow

How to create custom directive to listen to input changes

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

Comments

Related