Ошибка: [$ compile: multidir] при использовании нескольких директив на одном элементе

Question

Я сделал форму для оплаты кредитных карт, которые содержат много валидаций, на приведенном ниже примере я пытаюсь проверить 2 настройки, один тип карты (виза, diners, amex и т. д.), а второй валидатор - для длины карты. Я знаю, что есть проверка дизайна материала для длины, но не блокирует пользователя от ввода более указанного количества символов.

Во всяком случае, я получаю эту ошибку:

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);