Angularjs 来自 $rootscope 的服务调用导致无休止的迭代循环

Question

我对 ng-world 还很陌生，所以请对我的菜鸟放轻松 :)

在组织我的代码和理解它的依赖注入 IoC 方法时，我真的试图保持 "angular" 的思维方式。

我的目标之一是处理 SharePoint 中的 REST 服务。 SharePoint 集成本身不是问题。我需要在 UI 元素内的按键上调用 REST 服务以提供建议列表。就像我说的那样，我已经使用 ngResource 连接并运行服务。该服务是 $resource 元素和工厂注入的帮助程序方法的组合，该方法连接 POST.

中所需的有效负载 JSON

如何在控制器中成功测试我的服务的示例是：

peoplePickerControllers.controller('PeoplePickerSearchCtrl', 
       ['$scope', 'PeoplePickerUtils',
           function($scope, PeoplePickerUtils) {
               $scope.Data = PeoplePickerUtils.resolveUser('scott');
 }]);

这调用了一个在工厂注入到我的服务模块中的方法。将 $scope 元素数据分配给结果然后将该数据绑定到：

{{ Data | json }}

我得到了预期的结果。

然而，由于此服务方法需要在 UI 交互期间以及几乎每个控制器中重复调用，所以我想将其全局绑定。

在几个不同的讨论线程之后，我决定使用 app.run() 将其连接到 $rootScope，如下所示：

myApp.run(['$rootScope','PeoplePickerUtils',
   function($rootScope, PeoplePickerUtils) {
       $rootScope.PeoplePicker = PeoplePickerUtils;
   }
]);

我知道这个概念有效，因为下面的代码示例运行s 没有问题：

 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>

不幸的是，当我将服务引用绑定到根范围并从页面内调用它时，我陷入了一个最终崩溃的永恒循环 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 的承诺是如何工作的。我的结论是：

当在控制器内部用于绑定到 $scope 元素时，我的服务按预期工作。
- 当绑定到 $rootScope 时，该函数似乎陷入了某种递归循环。

我已将所有这些归结为单个页面中的最少代码，但是除非您有 SharePoint 2013 或 Office365 网站，否则代码不会完全运行。如果有人认为它对这次讨论有价值，我会分享它，但我个人认为这是我缺乏理解的原因。

Answer 1

在插值中调用函数时 {{xxx()}} 需要小心。插值在每个摘要循环中运行，你在其中调用一个函数，一切都很好，但是在函数中你正在进行服务调用或再次触发摘要循环的东西（例如： - 在它有 resolved/rejected 和每个带有资源调用的承诺链）或者即使它 returns 一个不同的对象引用（ng-bind），插值表达式也会被再次评估以稳定视图。 Angular 将继续希望视图在每个摘要周期后都能稳定，但显然不是。 Angular 在内部执行此循环直到最大限制为 10 次（内部设置但可配置，但它不会解决您的问题）并停止尝试稳定显示您在控制台中看到的错误。

只是在触发事件时进行调用，不确定您为什么要这样做。但是您也可以在实例化时立即在控制器中执行此操作，并将数据作为属性绑定到视图。或者在特定事件发生期间绑定函数 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>

Angularjs 来自 $rootscope 的服务调用导致无休止的迭代循环

Angularjs service call from $rootscope causes unending iterative loop

javascript

sharepoint

angularjs

angular-resource