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] : []" />

然而，这导致Error: $rootScope:infdig Infinite $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] : []" />
  -->

由于它返回一个新数组，因此AngularJS确定每个$digest周期的模型不同，从而导致错误。如果元素没有改变，解决方案是返回相同的数组对象：

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

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

演示

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

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

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

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

Angular - 错误：$ rootScope：使用控制器变量设置指令属性时的infdig

2 个答案:

演示