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。

＆＃13;

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

＆＃13;

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

＆＃13;

自定义指令，用于在元素上设置自定义指令属性

1 个答案: