Question

我试图创建一个包含带有ng-model的输入字段的指令，并知道inputcontrol是否有效。（我想根据这种状态更改指令中标签上的类。）我想使用ngModelController。$ valid来检查它，但它总是返回true。

formcontroller。$ valid或formcontroller.inputfieldname。$ valid可以像exprected一样工作，但是因为我试图使用formcontroller构建一个可重用的组件不是很方便，因为那时我必须确定表单的哪个字段对应当前指示。

我不明白为什么一个工作而一个不工作，因为在de angular source中它似乎是应该管理这些状态的相同代码：ngModelController。$ setValidity函数。

我创建了一个测试指令，其中包含一个带必需值和最小值的数字字段。正如您在下面的小提琴中看到的那样，模型控制器仅在页面加载期间触发，之后永远不会更改。

jsfiddle with example directive

指令代码：

angular.module('ui.directives', []).directive('textboxValid',
    function() {
      return {
        restrict: 'E',
        require: ['ngModel', '^form'],
        scope: {            
            ngModel: '='
        },
        template: '<input  type="number" required name="somefield" min="3" ng-model="ngModel" /> '+
          '<br>Form controller $valid: {{formfieldvalid}} <br> ' + 
          'Model controller $valid: {{modelvalid}} <br>'+
          'Form controller $valid: {{formvalid}} <br>',
        link: function (scope, element, attrs, controllers) {
            var ngModelCtrl = controllers[0];
            var formCtrl = controllers[1];

            function modelvalid(){ 
                return ngModelCtrl.$valid;
            }

            function formvalid(){ 
                return formCtrl.$valid;
            }

            scope.$watch(formvalid, function(newVal,oldVal)
            {
                scope.modelvalid = ngModelCtrl.$valid;
                scope.formvalid = formCtrl.$valid;
                scope.formfieldvalid = formCtrl.somefield.$valid;
            });

            scope.$watch(modelvalid, function(newVal,oldVal)
            {
                scope.modelvalid = ngModelCtrl.$valid;
                scope.formvalid = formCtrl.$valid;
                scope.formfieldvalid = formCtrl.somefield.$valid;           
                //This one only gets triggered on pageload
                alert('modelvalid ' + newVal );
            });
        }


    };
    }
  );

有人可以帮我理解这种行为吗？

Answer 1

我认为因为你正在看一个函数而$ watch只在调用这个函数时执行!!

请注意模型：

scope.$watch('ngModel', function(newVal,oldVal)
            {
                scope.modelvalid = ngModelCtrl.$valid;
                scope.formvalid = formCtrl.$valid;
                scope.formfieldvalid = formCtrl.somefield.$valid;           
                //This one triggered each time the model changes
                alert('modelvalid ' + ngModelCtrl.$valid );
            });

Answer 2

我想出来了..

textboxValid指令具有ng-model指令，指令模板创建的输入也是如此。但是，这些是两个不同的指令，都有自己独立的控制器。

所以，我改变了我的解决方案，使用如下的属性指令。这按预期工作。

.directive('attributetest',
    function() {
      return {
        restrict: 'A',
        require: 'ngModel',
        scope: {            
            ngModel: '='
        },
        link: function (scope, element, attrs, ngModelCtrl) {

            function modelvalid(){ 
                 return ngModelCtrl.$valid;
            }

        scope.$watch(modelvalid, function(newVal,oldVal){
                console.log('scope.modelvalid = ' + ngModelCtrl.$valid );
            });     

        }       

    };
  });

为什么ngModelCtrl。$有效不更新？

2 个答案: