角度指令只被调用一次答案

【问题标题】：angular directive was only called once角度指令只被调用一次
【发布时间】：2015-06-27 07:45:42
【问题描述】：

我正在使用指令来构建自定义验证器，它工作正常。但是，它只被调用过一次！如果我的“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;
                };

            }
        };
    });

【问题讨论】：

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

标签： angularjs angularjs-directive

【解决方案1】：

验证器的主要目的是验证用户输入或模型更改的ngModel值，所以它应该用于checkbox/textara/input等。你不能验证所有的ng-model。 Angular 足够聪明，知道 ng-model 没有意义，所以他只是忽略它。

如果您只想更改错误消息，您可以通过 .length 属性进行检查。如果你想让整个表单无效，我建议你制作自定义指令，把它放在上面，然后在这个指令的验证器中检查 scope.number.length > 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);
               });
            }
        };
    });

【讨论】：