获取角度指令属性值返回'不确定' [英] Getting angular directive attribute value returns 'undefined'

问题描述

我做了输入掩码指令。但是，当我传递一个字符串值的属性是不确定的。如果我直接传递面具它的工作。

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}'/>

不工作， attrs.inputMask 是未定义（应该进入的情况下'钱'）

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

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

什么是错的？

推荐答案

当您使用范围：真正的一个新的范围将这个指令创建。然后，你的 $观看工作正常，你应该创建一个新的属性，以目前的范围，所谓的输入掩码，接收 attrs.inputMask

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

另一种选择，就是使用散列对象指令的scope属性。

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

借助指令文档写道：

{}（对象哈希） - 创建一个新的'隔离'的范围。在隔离
  范围从正常范围的不同在于，它不中典型
  从父继承的范围。创建可重用时，这是非常有用
  部件，这不应该不小心读取或修改的数据
  父范围。

{} (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.

（...）

@或@attr - 局部范围的属性绑定到DOM属性的值

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

这样的话，你可以创建你的范围绑定DOM属性：

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);
    });
    /* ... */
}

小提琴

这篇关于获取角度指令属性值返回'不确定'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！