14

私はまだ Angular.JS に頭を悩ませています。

リモート Web サービスからデータを取得する 2 つの独立した $http 呼び出しがあります。両方のサービス呼び出しが完了した後に開始したいアクションがあります。

  1. 最初のサービス コールは、$scope.model にデータを入力します。
  2. 2 番目のサービス呼び出しは、$scope.model 内のデータを変更します (ビューに表示されるいくつかのカウンター プロパティを追加します)。

もう 1 つの固有の要件は、最終的に 2 番目のサービス コールが呼び出され、$scope.model を使用してコントローラーの外部で更新されることです。通知メッセージ ポンプです。

私はプロミス $q とおそらく $service を使用するつもりだと推測していますが、いくつかのベスト プラクティスに従って、このようなことをどこから始めればよいかよくわかりません。

ここでは非同期呼び出しが適切ではないように思えますが、私の例では同期的に実行することで単純化できるためです。ただし、2 番目のサービス コールは通知アップデータであるため、継続的にサーバーにポーリングされます (最終的には Websocket が使用されます)。

これは、このアプリケーションで見られる一般的なパターンです。

4

2 に答える 2

29

$q promise を使用する必要があります。特に $q.all()。すべての $http メソッドは promise を返します。すべての promise が解決されるのを待ってから、promise の結果の配列を渡して$q.all([promise, promise, promise]).then(doSomething)呼び出します。doSomething

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のデモンストレーションです。

于 2013-02-27T16:53:55.863 に答える
2

最初のサービス コール用のサービスを作成します。ピートの答えはそれを助けるでしょう: https://stackoverflow.com/a/12513509/215945

コントローラーの then() コールバックで、適切な $scope.model プロパティの $watch を追加します。

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
      }
    })
  });
});
于 2013-02-27T16:50:21.017 に答える