获取角度指令属性值返回

获取角度指令属性值返回

本文介绍了获取角度指令属性值返回'不确定'的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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.

借助写道:

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

(...)

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

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

09-02 04:17