角错误:使用控制器变量设置指令属性时的$rootScope:infdig
角错误:使用控制器变量设置指令属性时的$rootScope:infdig
提问于 2017-04-04 16: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-04 17: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 03: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
复制相关文章
![[oeasy]python0052_ raw格式字符串_单引号_双引号_反引号_ 退格键](https://developer.qcloudimg.com/http-save/7606088/9b2a28a1d11870a4a4de487bbd6b6ecb.png)
点击加载更多
相似问题
Emacs python模式文件模式规范错误
Emacs python模式
EMACS-Python-模式-加载错误
用于Markdown和Python的Emacs多模式
Emacs perl模式中的遗传引号
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
