问题描述
我做了输入掩码指令。但是,当我传递一个字符串值的属性是不确定的。如果我直接传递面具它的工作。
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);
});
/* ... */
}
这篇关于获取角度指令属性值返回'不确定'的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!