Filter input with directive

Question

html

<input type="text" name="usernr" ng-model="userNr" placeholder="user nr"
                               tabindex="2" ng-usernumber/>

javascript

app.directive('ngUserNumber', function() {
            return {
                restrict: 'A',
                require: 'ngModel',
                link: function(scope, elm, attrs, ctrl) {
                    console.log("inside directive");
                    ctrl.$parsers.push(function(data) {
                        console.log("//convert data from view format to model format");

                        data = data.toString() + " test";

                        return data; //converted
                    });

                    ctrl.$formatters.push(function(data) {
                        console.log("//convert data from model format to view format");

                        data = data.toString() + " test";

                        return data; //converted
                    });
                }
            };
        });

I would like to replace the data provided by ng-model, with data from inside the directive. But nothing happens. How come the custom directive isn't used?

I followed this doc: http://www.ng-newsletter.com/posts/directives.html
other source: https://stackoverflow.com/a/15346236/489856

Typo? `ng-usernumber` will be normalized as `ngUsernumber` instead of `ngUserNumber`. — rogerz, Sep 24 '13 at 09:30

Thomas Pons · Accepted Answer · 2013-09-24T09:36:02.750

Do it just like that :

var app = angular.module('MyApp', []);

app.controller('MyCtrl', function($scope){

  });

app.directive('ngUsernumber', function() {
            return {
                restrict: 'A',
                require: 'ngModel',
                link: function(scope, elm, attrs, ctrl) {

                    var format = function(data){
                        console.log("//convert data from view format to model format");

                        if(data !== undefined){
                          data = data.toString() + " test";
                        }


                        return data; //converted
                    };

                    ctrl.$parsers.push(format)
                    ctrl.$formatters.push(format);

                }
            };
        });

Working plunkr here : http://plnkr.co/edit/iA85KC?p=preview

You have to respect CamelCase for your directive note : ngUsernumber -> ng-usernumber if you do ngUserNumber -> ng-user-number

Hope it helps !

I've update the plunlkr if you look under the input the good string is print — Thomas Pons, Sep 24 '13 at 12:04
ng-model = double binding. So how come only the paragraph shows "yourtypedstring test" and the inputfield doesn't add test to ng-Model? — Vincent, Sep 24 '13 at 12:24

sad comrade · Answer 2 · 2018-03-29T10:56:18.507

In order to reflect changes to the current input you need to call

ctrl.$setViewValue(transformedInput);
ctrl.$render();

Found solution here

Quote from docs:

In any case, the value passed to the method should always reflect the current value of the control. For example, if you are calling $setViewValue for an input element, you should pass the input DOM value. Otherwise, the control and the scope model become out of sync. It's also important to note that $setViewValue does not call $render or change the control's DOM value in any way. If we want to change the control's DOM value programmatically, we should update the ngModel scope expression. Its new value will be picked up by the model controller, which will run it through the $formatters, $render it to update the DOM, and finally call $validate on it.

Filter input with directive

2 Answers2