javascript - 与另一个指令一起使用时，angularjs 验证器不起作用

Question

我有一个“uniqueCheck”指令，它检查该值是否已存在于列表中，并相应地验证 ngModel。该指令当用于输入标记时按预期工作，但当用于呈现输入标记的指令时，结果不符合预期。

指令内的验证器函数被调用，但它不会验证或无效输入的 ngModel。
您可以在提供的 plnkr 链接上查看指令的完整代码

Plnkr链接:plnkr

html如下:

<--! when used with a directive -->
<my-wrapper ng-model="values.abc" unique-check="" list="list" prop="name"> </my-wrapper>

<--! when used on an input tag-->    
 <div ng-form="myform">
     <input type="text" unique-check 
        list="list" prop="name" 
        name="myfield" 
        ng-model="values.pqr"/>
  <span>isDuplicate:{{myform.myfield.$error.isDuplicate}}</span>
</div>

Answer 1

您正在创建 2 个单独的 ngModel实例，当输入更改时，它们都会更新。

第一个是由 <input> 创建的本身，它是分配给“myform”的那个。这就是<span> my-wrapper 内的错误消息也被绑定(bind)了。

第二个是由 my-wrapper 创建的指令 - 这是附加了验证器的指令。

如果您检查控制台(对于下面的 plnkr)并检查输入更改时验证器输出的值，您可以看到 ngModel与验证器关联，不一样 ngModel这与表格相关。但当输入更改时，两者实际上都会更新。

页面加载后清除控制台，然后在更改第一个输入时检查输出。

http://plnkr.co/edit/nz6ODOVpn6lJlb055Svs?p=preview

为什么会发生这种情况？

因为 ng-model指令传递相同的字符串(“values.abc”)，然后根据范围进行评估，以确定它们应该监视和更新哪个对象属性 - 即双向绑定(bind)。

因此，当您更改输入时，您正在更改 scope.values.abc 的值通过输入 ngModel实例。此更改由 my-wrapper 获取ngModel实例 - 因为它正在监视相同的对象属性 - 然后验证自身。

你不能用这种方式解决问题，如ngModel指令需要一个字符串，而不是另一个 ngModel实例。

解决方案

您可以从 my-wrapper 转移属性到input编译时:

app.directive("myWrapper", function(){

    var templateFn = function(element, attrs){
        return '<div ng-form="myform">'+
                   '<input type="text" name="myfield"/>'+
                   '<span>(inside directive) : isDuplicate:{{myform.myfield.$error.isDuplicate}}</span>'
               '</div>';
    }

    return {
        restrict :'E',
        template : templateFn,
        require: 'ngModel',
        scope: true,
        compile: function(element, attrs) {
            var attr;
            angular.forEach(element.find('input'), function(elem) {
                elem = angular.element(elem)
                for(attr in attrs.$attr) {
                    elem.attr(attrs.$attr[attr], attrs[attr]);
                }
            });

            for(attr in attrs.$attr) {
                element.removeAttr(attrs.$attr[attr]);
            }
        }
    }
});

http://plnkr.co/edit/m2TV4BZKuyHz3JuLjHrY?p=preview