Question

我正在尝试创建一个像信用卡一样的输入，我的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或者其他内容。它似乎只适用于链接函数的开始，如果我在函数内部调用它，它就不再起作用了。

我希望我能得到一个帮助，谢谢你，丹尼尔！

Answer 1

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

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

更改指令内的属性值

1 个答案: