0

我正在尝试向输入动态添加验证,目的是让控制器存储每个输入的验证类型和错误消息。它正在工作,但当表单处于 ng-if 中时不起作用,只有在异步调用返回时才设置为 true。

这是一个不工作的精简示例: http ://plnkr.co/edit/aeZJXqtwVs85nPE1Pn2T?p=preview

如果从包含的 div 中删除 ng-if,验证将开始工作,并且输入将填充异步调用中设置的数据。使用 ng-if,文本不会被填充,验证也不会触发。

<body ng-controller="MainCtrl">
    <div ng-if="name">
      <form name="demoForm">
        <input type="text" 
               name="password" 
               ng-model='name' 
               add-min-length 
               ng-maxlength='15' 
               required/>

        <div ng-messages='demoForm.password.$error'>
          <div ng-message='required'>required</div>
          <div ng-message='minlength'>min length</div>
          <div ng-message='maxlength'>max length</div>
        </div>
      </form>  
    </div>
</body>

删除 ng-if="name" 并开始工作。

app.controller('MainCtrl', function($scope, $timeout) {
  $timeout(function(){
    $scope.name = 'Thing';  
  }, 1000);
});

app.directive('addMinLength', function($compile){
    return{
        priority: 1001,
        terminal: true,
        compile: function(el){
            el.removeAttr('add-min-length')
            el.attr('ng-minlength', '5');

            var fn =  $compile(el);
            return function(scope){
              fn(scope);
            }
        }
    }
}); 

有没有人解释为什么会这样?

我已阅读https://groups.google.com/forum/#!searchin/angular/ng-if $20directive/angular/Vjo4HZ2bW1A/vKWf-m6BKMkJ 似乎问题可能相似,但不是我需要的。

谢谢你的帮助

4

0 回答 0