在元素上設置自定義指令屬性的自定義指令

Question

我正在使用ui-mask從AngularJS-UI。我想根據HTML輸入類型動態設置屬性。

這是你如何正常使用此指令：

<input type="tel" class="form-control" 
     ng-model="Model.Homephone" placeholder="Home Phone" 
     ui-mask="(999) 999-9999" ui-mask-placeholder/> 

它正常工作，這樣。現在，我創建了一個指令，根據輸入類型添加該屬性的值。

自定義指令：

angular.module('App').directive("uiMaskType", ['$log', function ($log) { 
return { 
    restrict: "A", 
    require: 'ngModel', 
    link: function (scope, element, attributes, ngModel) { 

     $log.log(element.attr('type')); 

     switch(element.attr('type')) { 
      case 'tel': 
       element.attr('ui-mask', '(999) 999-9999'); 
       break; 
      case 'text': 
       element.attr('ui-mask', '999-99-9999'); 
       break; 
     } 
    } 
}; 
}]); 

我用的指令輸入元素中是這樣的：

<input type="tel" class="form-control" 
     ng-model="Model.Homephone" placeholder="Home Phone" 
     ui-mask-type ui-mask-placeholder/> 

當我運行頁面的結果是這樣的：

<input type="tel" class="form-control" 
     ng-model="Model.Homephone" placeholder="Home Phone" 
     ui-mask-type ui-mask-placeholder ui-mask="(999) 999-9999"/> 

即使雖然屬性在那裏，但是掩蔽不起作用。我檢查了AngularJS-UI的mask.js文件中的指令優先級，並嘗試將其設置得更高，以便在編譯ui-mask之前添加屬性。 任何人都有一個想法可能是什麼問題？

Answer 1

您必須編譯添加的屬性並將其添加到您的指令中。 編譯前也刪除ui-mask-type以避免無限循環。

我會改變類型爲mask-type或任何其他名稱，以避免與輸入標籤的類型衝突。

terminal: true在我的演示中需要它的工作不完全確定爲什麼，但我認爲與ui-mask-placeholder指令存在問題。這是重新運行在你正在鍵入的字符。 terminal將停止執行較低優先級的其他指令。

請看看下面的演示或在這fiddle。

angular.module('App', ['ui.mask']) 
 
    .directive("uiMaskType", ['$log', '$compile', function ($log, $compile) { 
 
return { 
 
    restrict: "A", 
 
    priority: 200, 
 
    terminal: true, 
 
    //replace: true, 
 
    link: function (scope, element, attributes) { 
 

 
     $log.log(element.attr('mask-type')); 
 

 
     switch(element.attr('mask-type')) { 
 
      case 'tel': 
 
       element.attr('ui-mask', '(999) 999-9999'); 
 
       break; 
 
      case 'text': 
 
       element.attr('ui-mask', '999-99-9999'); 
 
       break; 
 
     } 
 
     element[0].removeAttribute('ui-mask-type'); // remove our attribute dir. to avoid infinte loop 
 
     //element.attr('ui-mask-placeholder',''); 
 

 
     console.log(attributes, element); 
 
     element.replaceWith($compile(element)(scope)); 
 
    } 
 
}; 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script src="https://cdn.rawgit.com/angular-ui/ui-mask/master/dist/mask.js"></script> 
 

 
<div ng-app="App"> 
 
    <input mask-type="text" class="form-control" ng-model="Model.text" placeholder="Enter text" ui-mask-type="" ui-mask-placeholder/> 
 
    <input mask-type="tel" class="form-control" ng-model="Model.homePhone" placeholder="Home Phone" ui-mask-type="" ui-mask-placeholder=""/> 
 
    
 
    <pre>{{Model | json: 2}}</pre> 
 
</div>