更改指令内的属性值

时间:2014-06-19 23:24:48

标签: angularjs angularjs-directive

我正在尝试创建一个像信用卡一样的输入,我的HTML看起来像这样

<input  id="card-number" class="card-number" name="card-number" card-number ng-model="card.number" ui-mask="**** **** **** ****" />

我的指令看起来像这个

.directive('cardNumber', function($cardUtils) {
    return {
        restrict: 'A',
        require: ['^card', 'ngModel'],
        scope: {
            model: '=ngModel'
        },
        link: function(scope, elem, attrs, ctrls) {

            attrs.uiMask = "****";

            var cardCtrl = ctrls[0],
                ngModelCtrl = ctrls[1];

            var watchModel = function() {
                return ngModelCtrl.$viewValue;
            }

            scope.$watch(watchModel, function() {
                var cardType = $cardUtils.getCardByNumber(ngModelCtrl.$viewValue);
                if(cardType.classname == 'american-express')
                    attrs.uiMask = "****     ******     *****";
                else
                    attrs.uiMask = "****     ****     ****     ****";
                    scope.$apply();
                cardCtrl.updateCardClass(ngModelCtrl.$viewValue);
            });

        }
    };
});

现在问题出在指令内,即行

attrs.uiMask = "****";

实际上是从输入中更改ui-mask属性,但是当我在$ watch函数中使用相同的东西时,attrbute甚至不会改变if或者其他内容。它似乎只适用于链接函数的开始,如果我在函数内部调用它,它就不再起作用了。

我希望我能得到一个帮助,谢谢你,丹尼尔!

1 个答案:

答案 0 :(得分:1)

在编译/链接功能中,您可以使用attrs.$set

...
link: function(scope, element, attrs){
    attrs.$set('uiMask', '** ** *');
}
相关问题