Question

我对ng-world相当新，所以请放轻松我的小便：）

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

我的目标之一是在SharePoint中处理REST服务。 SharePoint集成本身不是问题。我需要在UI元素内的按键上调用REST服务以提供建议列表。就像我说的那样，我已经将服务连接起来并使用ngResource工作。该服务是$ resource元素和工厂注入的辅助方法的组合，它连接POST中所需的有效负载JSON。

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

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

这会调用工厂注入我的服务模块的方法。将$ scope元素Data分配给结果时，然后将该数据绑定到：

{{ Data | json }}

我得到了预期的结果。

然而，因为这种服务方法需要在UI交互期间重复调用，并且几乎在每个控制器中我想要全局绑定它。

在几个不同的讨论主题后，我决定使用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>

不幸的是，当我将服务引用绑定到根作用域并从页面内部调用它时，我陷入了永久性循环，最终导致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()}}内调用函数时，需要注意。插值运行每个摘要周期，你在其中调用一个函数，一切都很好，但是然后在你正在进行服务调用的函数内或者再次触发摘要周期的东西（例如： - 它已经解决/拒绝和每个承诺之后）使用资源调用链）或者即使它返回不同的对象引用（使用ng-bind），也会再次计算插值表达式以稳定视图。 Angular将继续希望在每个消化周期后视图将保持稳定，但显然不是。 Angular会在内部循环，直到内部设置的最大限制为10倍（内部设置但可配置，但不能解决您的问题）并停止尝试稳定显示您在控制台中看到的错误。

只需在触发事件时拨打电话，不确定为什么要这么做。但是，当它被实例化时，您可以立即在控制器中执行此操作，并将数据作为属性绑定到视图。或者在特定事件发生期间绑定函数myGlobalFunc('foo')。

如此恰当的方式就是：

当在控制器内部使用绑定到$ scope元素时，我的服务按预期工作。

这是一个简单的示例来复制您的问题：

＆＃13;

angular.module('app', []).run(function($rootScope, $q) {
  $rootScope.showData = function() {
    var obj = {};
    $q.when('hey').then(function(data) {
      obj.name = data;
    });
    return obj;

  }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  {{showData().name}}
</div>

＆＃13;

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

1 个答案: