Angular - Error: $rootScope:infdig when setting a directive attribute using a controller variable

Question

我有一个指令可以防止将某些值输入到输入中。例如这个...

<input type="number" name="testValue" ng-model="testValue" 
    block="[0, 10, 17]" />

...如果用户输入 0、10 或 17，将给出验证错误。

这工作正常，但现在我需要根据控制器中的变量有条件地设置被阻止的值，所以我尝试使用三元来设置值，如下所示...

<input type="number" name="testValue" ng-model="testValue" 
    block="blockValues ? [0, 10, 17] : []" />

然而，这会导致错误：$rootScope:infdig 无限 $digest Loop，我不明白为什么。有人可以向我解释这个错误以及我可以做些什么来解决它吗？或者任何替代方案也将不胜感激。谢谢！

这里有一个代码片段来演示：

var myApp = angular.module("myApp", []); 
myApp.controller("myCtrl", function($scope) {
    $scope.blockValues = true;
    $scope.testValue = '';
});


myApp.directive('block', function() {
        'use strict';
        return {
            restrict: 'A',
            require: 'ngModel',
            scope: {
                block: '='
            },
            link: function(scope, element, attrs, ngModel) {
                ngModel.$validators.allowedValues = function (value) {
                    return !scope.block || scope.block.indexOf(value) === -1;
                };
            }
        };
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
    <form name="myForm">
      <!-- Errors -->
      <input type="number" name="testValue" ng-model="testValue"
        block="blockValues ? [0] : []" />

      <!-- No Errors
      <input type="number" name="testValue" ng-model="testValue"
        block="false ? [0] : []" />
      -->
      <!-- No Errors
      <input type="number" name="testValue" ng-model="testValue"
        block="true ? [0] : []" />
      -->
      <!-- No Errors
      <input type="number" name="testValue" ng-model="testValue"
        block="[0]" />
       -->
       <!-- No Errors
      <input type="number" name="testValue" ng-model="testValue"
        ng-min="blockValues ? 1 : 0" />
       -->      
    </form>
    <div>{{myForm.testValue.$error}}</div>
</div>

Answer 1

一个常见的错误是绑定到一个每次调用时都会生成一个新数组的函数。在这种情况下，每次都会生成一个新数组 [0]，从而产生无限摘要错误。

  <!-- Infinite Digest Errors
  <input type="number" name="testValue" ng-model="testValue"
    block="blockValues ? [0] : []" />
  -->

由于它return是一个新数组，AngularJS确定模型在每个$digest循环上都不同，从而导致错误。解决办法是return同一个数组对象，如果元素没变：

  <!-- FIXED -->
  <input type="number" name="testValue" ng-model="testValue"
    ng-init="a1=[0];a0=[]" block="blockValues ? a1 : a0" />

有关详细信息，请参阅 AngularJS Error Reference - $rootScope / infdig

演示

var myApp = angular.module("myApp", []); 
myApp.controller("myCtrl", function($scope) {
    $scope.blockValues = true;
    $scope.testValue = '';
});


myApp.directive('block', function() {
        'use strict';
        return {
            restrict: 'A',
            require: 'ngModel',
            scope: {
                block: '='
            },
            link: function(scope, element, attrs, ngModel) {
                ngModel.$validators.allowedValues = function (value) {
                    return !scope.block || scope.block.indexOf(value) === -1;
                };
            }
        };
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

<div ng-app="myApp" ng-controller="myCtrl">
    <form name="myForm">
      <!-- Infinite Digest Errors
      <input type="number" name="testValue" ng-model="testValue"
        block="blockValues ? [0] : []" />
      -->

      <!-- FIXED -->
      <input type="number" name="testValue" ng-model="testValue"
        ng-init="a1=[0];a0=[]" block="blockValues ? a1 : a0" />
      
    </form>
    <div>{{myForm.testValue.$error}}</div>
</div>

Answer 2

我发现使用 ng-model-options 有帮助：

ng-model-options="{ allowInvalid: true, debounce: 200 }"

在此处阅读更多文档：https://docs.angularjs.org/api/ng/directive/ngModelOptions

Angular - Error: $rootScope:infdig when setting a directive attribute using a controller variable

Angular - Error: $rootScope:infdig when setting a directive attribute using a controller variable

angularjs

angularjs-directive

angularjs-scope

演示