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

Question

我对 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)，我会分享它，但我个人认为这是我缺乏理解造成的。

Answer 1

当您在插值{{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>