我对 ng 世界还很陌生,所以请不要介意我的新手:)
我确实尝试在组织代码和理解其依赖注入(inject) IoC 方法时保持“Angular ”思维方式。
我的目标之一是处理 SharePoint 中的 REST 服务。 SharePoint 集成本身并不是问题。我需要在 UI 元素内的按键上调用 REST 服务来提供建议列表。就像我说的,我已经连接了服务并使用 ngResource 工作。该服务是 $resource 元素和工厂注入(inject)的辅助方法的组合,该方法连接 POST 中所需的有效负载 JSON。
如何在 Controller 中成功测试我的服务的示例是:
peoplePickerControllers.controller('PeoplePickerSearchCtrl',
['$scope', 'PeoplePickerUtils',
function($scope, PeoplePickerUtils) {
$scope.Data = PeoplePickerUtils.resolveUser('scott');
}]);
这调用了工厂注入(inject)到我的服务模块中的方法。将 $scope 元素 Data 分配给结果时,然后将该数据绑定(bind)为:
{{ Data | json }}
我得到了预期的结果。
但是,由于此服务方法需要在 UI 交互期间以及几乎每个 Controller 中重复调用,所以我想将其全局绑定(bind)。
在几个不同的讨论线程之后,我决定使用 app.run() 将其连接到 $rootScope,如下所示:
myApp.run(['$rootScope','PeoplePickerUtils',
function($rootScope, PeoplePickerUtils) {
$rootScope.PeoplePicker = PeoplePickerUtils;
}
]);
我知道这个概念是有效的,因为以下代码示例运行没有问题:
myApp.run(['$rootScope','myUtilMethod',
function($rootScope, myUtilMethod) {
$rootScope.myGlobalFunc = function(params) { return params; };
}
]);
myApp.controller('MainCtrl', ['$scope', function($scope){}]);
</script>
<div ng-controller="MainCtrl">
<pre>{{ myGlobalFunc("foo") }}</pre>
</div>
不幸的是,当我将服务引用绑定(bind)到根范围并从页面内调用它时,我陷入了一个永恒的循环,最终导致 Chrome 崩溃。错误如下:
http://errors.angularjs.org/1.3.15/$rootScope/infdig?p0=10&p1=%5B%5DREGEX_STRING_REGEXP @ angular.js:63$get.Scope.$digest @ angular.js:14346$get.Scope.$apply @ angular.js:14571done @ angular.js:9698completeRequest @ angular.js:9888requestLoaded @ angular.js:9829
angular.js:11655 Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
http://errors.angularjs.org/1.3.15/$rootScope/infdig?p0=10&p1=%5B%5D
at REGEX_STRING_REGEXP (angular.js:63)
at Scope.$get.Scope.$digest (angular.js:14346)
at Scope.$get.Scope.$apply (angular.js:14571)
at done (angular.js:9698)
at completeRequest (angular.js:9888)
at XMLHttpRequest.requestLoaded (angular.js:9829)(anonymous function) @ angular.js:11655$get @ angular.js:8596$get.Scope.$apply @ angular.js:14573done @ angular.js:9698completeRequest @ angular.js:9888requestLoaded @ angular.js:9829
angular.js:63 Uncaught Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Watchers fired in the last 5 iterations: []
所以我很困惑,并且相信这是因为我不完全理解 ngResoure 的 promise 是如何工作的。我的结论是:
当在 Controller 内部使用绑定(bind)到 $scope 元素时,我的服务按预期工作。
- 当绑定(bind)到 $rootScope 时,该函数似乎陷入了某种递归循环。
我已将所有这些内容归结为单个页面中的最少代码,但是除非您有 SharePoint 2013 或 Office365 网站,否则代码将无法完全运行。如果有人认为这对这次讨论有值(value),我会分享它,但我个人认为这是我缺乏理解造成的。
最佳答案
当您在插值{{xxx()}}
中调用函数时,您需要小心。插值运行每个摘要周期,并且您在其中调用一个函数,一切都很好,但随后在该函数中您正在进行服务调用或再次触发摘要周期的东西(例如:-在它已解决/拒绝并且每个 promise 之后)链与资源调用),或者即使它返回不同的对象引用(使用 ng-bind),插值表达式也会再次计算以稳定 View 。 Angular 只会继续希望 View 在每个摘要周期后保持稳定,但显然不是。 Angular 会在内部执行此循环,直到最大限制为 10 次(内部设置,但可配置,但它不会解决您的问题),并停止尝试稳定显示您在控制台中看到的错误。
只需在事件触发时调用电话,但不确定为什么要这样做。但是您也可以在实例化 Controller 时立即在 Controller 中执行此操作,并将数据作为属性绑定(bind)到 View 。或者在特定事件发生期间绑定(bind)函数 myGlobalFunc('foo')
。
所以合适的方法是:
When used inside of a controller to bind to $scope elements my service works as expected.
这是一个足够简单的示例来重现您的问题:
angular.module('app', []).run(function($rootScope, $q) {
$rootScope.showData = function() {
var obj = {};
$q.when('hey').then(function(data) {
obj.name = data;
});
return obj;
}
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
{{showData().name}}
</div>
关于javascript - 来自 $rootscope 的 Angularjs 服务调用导致无休止的迭代循环,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30538223/