Question

我制作了一张包含许多验证的信用卡付款表格，在下面的输入中我尝试验证2个设置，一个是卡片类型（签证，食客，美国运通等等），第二个验证是卡的长度。我知道有一个长度的材料设计检查，但它不会阻止用户输入超过指定数量的字符。

无论如何，我收到了这个错误：

Error: [$compile:multidir]

在同一输入元素上使用2个指令

元素：

<input cc-type="ccType" wm-block wm-block-length="cardLength"/>

ccType指令：

app.directive('ccType',[function(){
    return {
        restrict: 'A',
        scope:{
            ccType:'='
        },
        link: function (scope, elem, attr, ctrl) {
            elem.on('keyup',function(){
                var getCardType = function(cardNumber){
                    if(/^4[0-9]{6,}$/.test(cardNumber)){
                        return 'visa';
                    }
                    if(/^5[1-5][0-9]{5,}|222[1-9][0-9]{3,}|22[3-9][0-9]{4,}|2[3-6][0-9]{5,}|27[01][0-9]{4,}|2720[0-9]{3,}$/.test(cardNumber)){
                        return 'mastercard';
                    }
                    if(/^3[47][0-9]{5,}$/.test(cardNumber)){
                        return 'amex';
                    }
                    if(/^3(?:0[0-5]|[68][0-9])[0-9]{4,}$/.test(cardNumber)){
                        return 'diners';
                    }
                    if(/^6(?:011|5[0-9]{2})[0-9]{3,}$/.test(cardNumber)){
                        return 'discover';
                    }
                    if(/^(?:2131|1800|35[0-9]{3})[0-9]{3,}$/.test(cardNumber)){
                        return 'jcb';
                    }
                    return null;
                };
                scope.ccType = getCardType(ctrl.$modelValue);
            });
        }
    }
}]);

wmBlock指令：

app.directive('wmBlock', function ($parse) {
    return {
        scope: {
          wmBlockLength: '='
        },
        link: function (scope, elm, attrs) {

          elm.bind('keypress', function(e){

            if(elm[0].value.length > scope.wmBlockLength){
              e.preventDefault();
              return false;
            }
          });
        }
    }   
});

Answer 1

wmBlock和ccType都需要一个新的隔离范围，这是不允许的。要解决此问题，请删除：

scope:{
   ccType:'='
},

并直接设置属性：

attr.ccType = getCardType(ctrl.$modelValue);

错误：[$ compile：multidir]在同一元素上使用多个指令时

1 个答案: