2015-06-26 87 views
0

我正在使用指令来构建一个自定义验证器,它工作正常。但是,它只被称为一次!如果我的“roleItems”被更新,这个指令不会再被调用!每次更新“roleItems”时如何调用它?角度指令只被调用一次

这里是标记。而“非空”是我的指令。

<form name="projectEditor">  
    <ul name="roles" ng-model="project.roleItems" not-empty> 
     <li ng-repeat="role in project.roleItems"><span>{{role.label}}</span> </li> 
     <span ng-show="projectEditor.roles.$error.notEmpty">At least one role!</span> 
     </ul> 
    </form> 

这是我的指令。它应该检查ng-model“roleItems”是否为空。验证的

angular.module("myApp", []). 
    directive('notEmpty', function() { 
     return { 
      require: 'ngModel', 
      link: function (scope, elm, attrs, ctrl) { 

       ctrl.$validators.notEmpty = function (modelValue, viewValue) { 


        if(!modelValue.length){ 
         return false; 
        } 

        return true; 
       }; 

      } 
     }; 
    }); 
+1

你打算在ul上做什么? ng-model用于对输入等组件进行双向数据绑定,其中用户可以输入存储在模型变量中的值。 ul不能这样做。这没有意义。只需删除此指令并使用

回答

0

主要目的是验证用户输入或模型的变化ngModel价值,所以应该USET到复选框/ textara /输入等一切你不能验证NG-模型。 Angular非常聪明,知道ng模型没有敏感,所以他只是忽略它。

我想只更改错误消息,您可以通过.length属性检查它。如果你想使整个表单无效,我建议你做自定义指令,把它放在,然后在这个指令验证器检查scope.number.length> 0

基本上只是调整你的指令代码输入元素和隐藏它....通过CSS或类型=隐藏,但不要让ngModel =“价值”它没有意义,因为ng-model期待可绑定和覆盖的值,但project.roleItems不可绑定!所以把ng-model =“dummyModel”和实际物品放到另一个参数中...

<input type="hidden" ng-model="dummyIgnoredModel" number="project.roleItems" check-empty> 


angular.module("myApp", []). 
    directive('checkEmpty', function() { 
     return { 
      require: 'ngModel', 
      link: function (scope, elm, attrs, ctrl) { 

       ctrl.$validators.push(function (modelValue, viewValue) { 


        if(!scope.number.length){ 
         return false; 
        } 

        return true; 
       }); 
      //now we must "touch" ngModel 
       scope.$watch(function() 
       { 
        return scope.number 
       }, function() 
       { 
        ctrl.$setViewValue(scope.number.length); 
       }); 
      } 
     }; 
    });