在ng-if中的指令中使用$ compile

时间:2014-10-31 22:21:09

标签: angularjs directive angular-ng-if

我正在尝试动态地向输入添加验证,目的是让控制器存储每个输入的验证类型和错误消息。它正在工作,但是当表单处于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 =&#34; name&#34;它开始起作用了。

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 似乎问题可能类似,但不是我需要的。

感谢您的帮助

0 个答案:

没有答案