角错误:使用控制器变量设置指令属性时的$rootScope:infdig
角错误:使用控制器变量设置指令属性时的$rootScope:infdig
提问于 2017-04-05 00:24:46
我有一个指令，禁止将某些值输入到输入中。比如这个..。
<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循环，我不明白为什么。有人能给我解释一下这个错误吗?我能做些什么来纠正它？否则任何替代方案都会受到欢迎。谢谢!
下面是演示的代码片段：
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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-04-05 01:37:13
一个常见的错误是绑定到一个函数，该函数每次调用时都会生成一个新数组。在这种情况下，每次都会生成一个新的数组[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错误引用- $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>
Stack Overflow用户
发布于 2017-07-26 11:18:24
我发现使用ng-model-options很有帮助：
ng-model-options="{ allowInvalid: true, debounce: 200 }"阅读有关文档的更多信息，在这里：https://docs.angularjs.org/api/ng/directive/ngModelOptions
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43219886
复制相关文章
相似问题
腾讯云开发者
