Angular Directive - NgModelCtrl Parser Issue

Question

I have a directive to show a symbol depending on the value of a field. This is attached to a field as follows:

<input type="text" placeholder="" class="text-input" ng-class="example_class" ng-model="exmaple-model" my-directive />

And a directive as follows:

module.directive("myDirective", function () {
    return {
        require: "?ngModel",

        link: function (scope, element, attrs, ngModelCtrl) {
            /*breakpoints show the line above and below are reached*/
            ngModelCtrl.$parsers.push(function (val) {
                /* call to function to show symbol, this line is never reached */
            }

The code is reaching the ngModelCtrl line, but reaches no further. Debugging has shown that while the ngModelCtrl looks to be built correctly (has functions and values, etc.) the $parsers is empty - the length is 0, the functions that should be there aren't.

Looking at the Chrome inspector yields no errors. Are there any reasons for the $parsers to be blank, or is there a way to debug the directive any further?

Why you have two link methods? (or just bad copied?) I guess ngModel should not be optional (without ?) — Thowk
– Thowk, Commented Oct 13, 2017 at 13:27

Aman Bachas · Accepted Answer · 2017-10-13 13:40:57Z

2

Your parser is showing 0 length, try to return some value from the parse method and use it as follows:

function parse(value) {
  if (value) {
    return value.toLowerCase();
  }
}
ngModelController.$parsers.push(parse);

answered Oct 13, 2017 at 13:40

Aman Bachas

2741 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Billy · Accepted Answer · 2017-10-13 13:28:58Z

0

Check out https://alexperry.io/angularjs/2014/12/10/parsers-and-formatters-angular.html

Have you tried putting your logic directly where you have "call to function to show symbol" vs calling the function?

answered Oct 13, 2017 at 13:28

Billy

351 silver badge6 bronze badges

Collectives™ on Stack Overflow

Angular Directive - NgModelCtrl Parser Issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related