Angularjs вызова службы от $ rootscope вызывает бесконечный итерационный цикл

Question

Я довольно новый для нг-мира, поэтому, пожалуйста, идти легко на моем noobness :)

Я действительно пытался держаться «угловым» способом думая о том, как организовать мой код и понять его методологию ввода IQ зависимости.

Одна из моих целей связана с службами REST в SharePoint. Интеграция с SharePoint не является самой проблемой. Мне нужно вызвать службу REST при нажатии клавиш в элементах пользовательского интерфейса, чтобы предоставить списки предложений. Как я уже сказал, у меня есть услуга, подключенная и работающая с использованием ngResource. эта услуга представляет собой комбинацию элемента $ resource и метода вспомогательного метода, введенного на заводе-изготовителе, который соединяет полезную нагрузку JSON, требуемую в POST.

Пример того, как я могу успешно проверить свою службу в контроллере:

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

Это вызывает метод, который был завод введен в мой сервисный модуль. При присвоении элементу $ scope Data к результатам затем привязка этих данных с помощью:

{{ Data | json }} 

Я получаю ожидаемые результаты.

Однако, поскольку этот сервисный метод является тем, что нужно многократно вызывать во время взаимодействия с пользовательским интерфейсом, и почти в каждом контроллере я хотел связать его по всему миру.

следующие несколько различных обсуждения темы, я решил об использовании 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), выражение интерполяции снова оценивается для стабилизации представления. Угловой будет продолжать надеяться, что представление будет стабильным после каждого цикла дайджестов, но, по-видимому, нет. Угловая делает этот цикл до максимального предела в 10 раз (внутренне настроенного, но настраиваемого, хотя он не решит вашу проблему) внутри и перестает пытаться стабилизировать отображение ошибки, которую вы видите на своей консоли.

Просто позвоните, когда событие запущено, и не знаете, почему именно вы хотите это сделать. Но вы также можете сделать это в контроллере сразу же после его создания и привязать данные как свойство к представлению. Или свяжите функцию myGlobalFunc('foo') во время определенного события.

Так подходящим способом было бы просто:

При использовании внутри контроллера для привязки к $ элементов области видимости моя служба работает, как ожидалось.

Вот достаточно простой пример, чтобы повторить ваш вопрос:

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>