Getting angular directive attribute value returns 'undefined'

Question

I'm doing a directive for input mask. But, when I pass a string as value the attribute is undefined. If I pass directly the mask It's working.

.directive('inputMask', function () {
return {
    restrict: 'EAC',
    scope: true,
    link: function (scope, element, attrs) {
        scope.$watch('inputMask', function (newVal) {
            console.log('inputMask', newVal);
        });
        var maskType = scope.$eval(attrs.inputMask);
        switch (maskType) {
            case 'phone':
                $(element).inputmask("phone", {
                    url: '@Url.Content("~/Scripts/jquery-inputmask/phone-codes/phone-codes.json")',
                    onKeyValidation: function () { //show some metadata in the console
                        console.log($(this).inputmask("getmetadata")["name_en"]);
                    }
                });
                break;
            case 'money':
                $(element).inputmask("decimal", { digits: 2 });
                break;
            case 'moneyGrouped':
                $(element).inputmask("decimal", {
                    radixPoint: ",",
                    autoGroup: true,
                    groupSeparator: ".",
                    groupSize: 3,
                    digits: 2
                });
                break;
            case 'email':
                $(element).inputmask('Regex', { regex: "[a-zA-Z0-9._%-]+@[a-zA-Z0-9-]+\\.[a-zA-Z]{2,4}" });
            default:
                $(element).inputmask(maskType);
        }

        $(element).inputmask(scope.$eval(attrs.inputMask));
        $(element).on('keypress', function () {
            scope.$eval(attrs.ngModel + "='" + element.val() + "'");
        });
    }
};
});

Working (will get into default of the switch):

<input type="teste" name="teste" value="" ng-model="form.email" input-mask='{ "mask": "d/m/y", "autoUnmask" : true}'/>

Not working, attrs.inputMask is undefined (should enter in case 'money'):

<input type="teste" name="teste" value="" ng-model="form.email" input-mask='money'/>

What is wrong?

This isn't your answer, but for googlers one thing to check is your camelcased scope parameters are expected to be spinal case in html when using shorthand syntax '=' — fiat
– fiat, Commented Jul 27, 2015 at 23:08
Please do this in your $watch - console.log(typeof newVal);, and check for two cases. Please revert back then I may solve the problem. Or provide a fiddle for this. — Vineet 'DEVIN' Dev
– Vineet 'DEVIN' Dev, Commented Oct 30, 2015 at 11:13

D.Evangelista · Accepted Answer · 2013-10-21 12:37:54Z

3

When you use scope: true a new scope will be created for this directive. Then, to your $watch works correctly, you should create a new attribute to the current scope, called inputMask, that receives the attrs.inputMask

scope.inputMask = attrs.inputMask;
scope.$watch('inputMask', function (newVal) {
    console.log('inputMask', newVal);
});

You can see a simplified Working fiddle here

The other option, is to use the a hash object in directive's scope attribute.

The directive docs writes:

{} (object hash) - a new 'isolate' scope is created. The 'isolate' scope differs from normal scope in that it does not prototypically inherit from the parent scope. This is useful when creating reusable components, which should not accidentally read or modify data in the parent scope.

(...)

@ or @attr - bind a local scope property to the value of a DOM attribute.

That way, you can create your scope binding the DOM attribute:

scope: { 
    inputMask: "@" 
},
link: function (scope, element, attrs) {
    scope.$watch('inputMask', function (newVal) {
        console.log('inputMask', newVal);
    });
    /* ... */
}

Fiddle

answered Oct 21, 2013 at 12:37

D.Evangelista

6,5511 gold badge28 silver badges33 bronze badges

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

3 Comments

Fals Over a year ago

attrs.inputMask still undefined using this.

D.Evangelista Over a year ago

Did you check the fiddles? What is your angular version?

Fals Over a year ago

check your self, just write the value of inputMask when you set as inputMask='phone' for exemple, is undefined

az7ar · Accepted Answer · 2013-10-21 18:59:24Z

0

In the directive use,

scope: {inputMask: '@'}

And in the link function instead of using attr.inputMask use scope.inputMask and that will work.

If you want to use attr then you can use

attr.$observe('inputMask', function() {
    console.log('changed');
}

Because initially the value will be undefined.

answered Oct 21, 2013 at 18:59

az7ar

5,2372 gold badges21 silver badges23 bronze badges

Comments

otterslide · Accepted Answer · 2016-10-16 01:49:08Z

0

The actual problem here was that scope.$eval('money') will return undefined. The attribute should be linking just fine to the directive, if it's in curly braces {}, or if it's a string such as 'money'.

It's what you're doing with the value that's causing the problem.

var maskType = scope.$eval(attrs.inputMask);

You would only need to use isolated scope with @, or attrs.$observe if you were passing interpolated attributes, such as {{money}}.

answered Oct 16, 2016 at 1:49

otterslide

5606 silver badges14 bronze badges

Collectives™ on Stack Overflow

Getting angular directive attribute value returns 'undefined'

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related