Angular.JS Выключите два вызова службы aync, затем выполните действия после завершения обоих

Я все еще обертываю свой мозг вокруг Angular.JS.

У меня есть два независимых $http-вызова, которые извлекают данные из удаленных веб-сервисов. У меня есть действие, которое я хочу отключить после завершения обоих вызовов службы.

Первый вызов службы заселяет $scope.model
Второй вызов службы изменяет данные в $scope.model(он добавляет некоторые свойства счетчика, которые отображаются в представлении)

Еще одно уникальное требование состоит в том, что второй вызов службы будет вызываться и обновляться вне контроллера с помощью параметра $scope.model. Это насос уведомления.

Я предполагаю, что я буду использовать promises $q и, возможно, $service, но я не совсем уверен, с чего начать что-то вроде этого, следуя некоторым лучшим практикам.

Я знаю, что это не похоже на то, что асинхронные вызовы здесь уместны, поскольку мой пример можно упростить, сделав это синхронно. Тем не менее, второй вызов службы является средством обновления уведомлений, поэтому он будет постоянно обрабатываться сервером (в конечном итоге будет использоваться веб-раскладка).

Это общий шаблон, который я увижу в этом приложении.

Ответ 1

Вы хотите использовать $q promises. В частности, $q.all(). Все методы $http вернут promises. $q.all([promise, promise, promise]).then(doSomething) будет ждать завершения всех promises, затем вызовет doSomething, передав ему массив результатов promises.

app.service('myService', ['$http', '$q', function($http, $q) {
   return {
      waitForBoth: function() { 
          return $q.all([
             $http.get('/One/Thing'),
             $http.get('/Other/Thing')
          ]);
      };
   }
}]);

Затем назовите его:

app.controller('MyCtrl', ['$scope', 'myService', function($scope, myService) {
   myService.waitForBoth().then(function (returnValues){
       var from1 = returnValues[0].data;
       var from2 = returnValues[1].data;
       //do something here.
   });
}]);

Здесь показан демонстрационный Plunker для вас.

Ответ 2

Создайте сервис для вашего первого вызова службы. Ответ Пита поможет с этим: fooobar.com/info/29092/...

В вашем контроллере в обратном вызове then() добавьте $watch для соответствующего свойства $scope.model:

app.controller('MainCtrl', function(myService, $scope) {
  myService.async().then(function(myData) {
    $scope.model = myData;
    $scope.$watch('model.???', function(newVal, oldVal) {
      if(newVal !== oldVal) {
         // do something here, now that $scope.model.??? has changed
      }
    })
  });
});