Question

我正在使用指令来构建自定义验证器，它工作正常。但是，它只被召唤一次！如果我的＆＃34; roleItems＆＃34;更新后，这个指令再没有被调用！每当＆＃34; roleItems＆＃34;更新？

以下是标记。并且＆＃34;非空＆＃34;是我的指示。

 <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＆＃34; roleItems＆＃34;是空的。

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;
                };

            }
        };
    });

Answer 1

验证器的主要目的是验证用户输入或模型更改的ngModel值，因此它应该用于复选框/ textara / input等。您无法验证所有内容的ng-model。 Angular足够聪明，知道ng-model没有任何敏感，所以他只是忽略它。

我想要更改错误消息，您可以通过.length属性检查它。如果你想使整个表格无效，我建议你制作自定义指令，把它打开，然后在这个指令的验证器中检查scope.number.length＆gt; 0

基本上只需将你的指令代码调整为输入元素并将其隐藏....通过css或type = hidden，但不要使ngModel =“value”没有意义，因为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);
               });
            }
        };
    });

angular指令只被调用一次

1 个答案: