在元素上设置自定义指令属性的自定义指令

Question

我正在使用来自 AngularJS-UI 的ui-mask。我想根据 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>