添加ng-pattern属性的指令

Question

我正在尝试创建一个将使用ng-pattern属性替换自身的指令.该属性应用于输入元素,但此后元素基本上变得不可用.我无法再在文本框中输入字符.

这是plunkr http://plnkr.co/edit/F6ZQYzxd8Y04Kz8xQmnZ?p=preview

我想我必须在添加属性后错误地编译元素.

app.directive('passwordPattern', ['$compile', function($compile){
    return{
    compile: function (element, attr){

        element.removeAttr('password-pattern');
        element.attr('ng-pattern', '/^[\\w\\S]{6,12}$/');

        return {
            pre: function preLink(scope, iElement, iAttrs, controller) {  },
            post: function postLink(scope, iElement, iAttrs, controller) {
                $compile(iElement)(scope);
            }
        };
    }
};
}]);

任何关于解决方案的想法或文本框变得无法使用的原因都将非常值得赞赏.谢谢.

Answer 1

除此之外priority: 1000,还需要添加terminal: true.

问题是没有 terminal: true,input指令会被编译两次,并且会添加2组更改侦听器,这会使ngModel指令逻辑略微抛出.

第一个编译Angular执行时看不到ng-pattern,因此输入指令不会将validateRegex解析器添加到其解析器列表中.但是,第二次编译(通过你的$compile(iElement, scope))看到ng-pattern并确实 添加了validateRegex解析器.

当您3在输入框中键入时,将调用第一个更改侦听器并查看该数字3.由于没有ng-pattern应用(这将添加validateRegex $parser),不$parsers存在,模型3立即更新.

但是,当调用第二个更改侦听器时,它会看到ng-pattern调用和调用validateRegex,调用 ngModel.$setValidity('pattern', false)和返回 undefined(因为模型永远不应该设置为无效值).这就是它与众不同-内部ngModel指令,因为以前$viewValue的3和新value的undefined是不同步的,角度调用输入指令的$render功能,更新输入是空的.因此,当您3在输入框中键入(或任何内容)时,它会立即被删除并且似乎已被破坏.

高priority(像1000)并且terminal: true会priority: 1001+在第一次编译时阻止输入指令(并且很可能是其他指令,除非你有一个指令).这很好,因为您希望输入指令考虑到ng-pattern - 而不是没有它.您不希望将多组更改侦听器添加到同一元素,或者它可能(并且会)导致奇怪的副作用.