AngularJS自定义验证指令 - 如何避免使用隔离范围

Posted 2021-05-04

我试图在文本字段上使用多个角度验证器，但遇到了Multiple directives requesting isolated scope错误。 （请在结束前阅读，作为副本。）

到目前为止我看到的所有解决方案，建议从违规指令中删除scope: {...}，但是对于我的场景，我需要从控制器中评估变量（并且$watch用于更改）。

我已经尝试过使用attrs.$observe，但我无法弄清楚如何将已评估的变量放入$validator函数中。 （另外，我不能$observe ngModel）。

如果有另一种方法可以解决这个问题，请告诉我。

这是我可以放在一起的最小例子。注： maxLength验证器的范围被注释掉，基本上禁用它：

angular

.module('app', [])

// validates the min length of a string...
.directive("minLen", function() {
    return {
      require: 'ngModel',
      restrict: 'A',
      scope: {
        ngModel: '=',
        minLen: '='
      },
      link: function(scope, element, attrs, ngModelCtrl) {
        scope.$watch('ngModel', function(){
          ngModelCtrl.$validate();
        });
        scope.$watch('minLen', function(){
          ngModelCtrl.$validate();
        });
        ngModelCtrl.$validators.minLength = function(modelValue, viewValue) {
          var value = modelValue || viewValue;
          return angular.isUndefined(scope.minLen) ||
            angular.isUndefined(value) ||
            value.length >= scope.minLen;
        };
      }
	};
})

.directive("maxLen", function() {
    return {
      require: 'ngModel',
      restrict: 'A',
// Commented out for now - causes error.      
//       scope: {
//         ngModel: '=',
//         maxLen: "="
//       },
      link: function(scope, element, attrs, ngModelCtrl) {
        scope.$watch('ngModel', function(){
          ngModelCtrl.$validate();
        });
        scope.$watch('maxLen', function(){
          ngModelCtrl.$validate();
        });
        ngModelCtrl.$validators.maxLength = function(modelValue, viewValue) {
          var value = modelValue || viewValue;
          return angular.isUndefined(scope.maxLen) ||
            angular.isUndefined(value) ||
            value.length >= scope.maxLen;
        };
      }
	};
})

// this controller just initialises variables...
.controller('CustomController', function() {
  var vm = this;
  vm.toggleText = function(){
    if (vm.text === 'aaa') {
      vm.text = 'bbbbb';
    } else {
      vm.text = 'aaa';
    }
  }
  vm.toggle = function(){
    if (vm.minLen === 3) {
      vm.minLen = 4;
      vm.maxLen = 12;
    } else {
      vm.minLen = 3;
      vm.maxLen = 10;
    }
  };
  vm.toggleText();
  vm.toggle();
  return vm;
})
;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<div ng-app="app" ng-controller="CustomController as ctrl">
  <ng-form name="ctrl.form">
    <label>Enter {{ctrl.minLen}}-{{ctrl.maxLen}} characters: </label>
    <input 
           name="text" 
           type="text" 
           ng-model="ctrl.text" 
           min-len="ctrl.minLen"
           max-len="ctrl.maxLen"
           />
  </ng-form>
  <br/><br/>
  <button ng-click="ctrl.toggle()">Modify validation lengths</button>
  <button ng-click="ctrl.toggleText()">Modify ngModel (text)</button>
  
  <h3>Validation (just list $error for now)</h3>
  <pre>{{ ctrl.form.text.$error | json }}</pre>
</div>

答案

1. 删除孤立的范围
2. 您不需要观察，观察ngModel - 当它发生变化时，angular将为您运行验证器。
3. 决定如何使用你的指令：my-val-dir =“{{valName}}”vs my-val-dir =“valName”。在第一种情况下，你使用attrs。$ observe（'myValDir'），在第二个$ watch（attrs.myValDir）和$ eval中。当你的价值变得简单时，比如数字或短字符串 - 第一种方式似乎很好，当价值很大时，即数组 - 使用第二种方法。

另一答案

删除隔离范围并使用scope.$watch来评估属性：

app.directive("minLen", function() {
    return {
      require: 'ngModel',
      restrict: 'A',
      scope: false,
   //     ngModel: '=',
   //     minLen: '='
   //   },
      link: function(scope, element, attrs, ngModelCtrl) {
        var minLen = 0;
        scope.$watch(attrs.minLen, function(value){
          minLen = toInt(value) || 0;
          ngModelCtrl.$validate();
        });
        ngModelCtrl.$validators.minLength = function(modelValue, viewValue) {
          return ngModelCtrl.$isEmpty(viewValue) || viewValue.length >= minLen;
        };
      }
    };
})

无需观察ngModel属性，因为当模型更改时，ngModelController将自动调用$validators集合中的函数。

当watch表达式是一个字符串时，string属性将被评估为Angular Expression。

有关更多信息，请参阅AngularJS scope API Reference - $watch。