Angular - 等待其他控制器中的请求完成

Question

我有两个并行加载的控制器，控制器A呼叫服务A，控制器B呼叫服务B.控制器B需要控制器A请求的数据。 （注意：控制器A是一个通用控制器，所以我不能在控制器B中调用服务A）

只有在服务调用（来自Ctrl A和Ctrl B）完成后，控制器B才能处理数据的最佳方法是什么？

我看到了一些$ q的例子，我在上面的情况下实施它有点困惑。

Answer 1

我会通过在控制器B中使用一次$watch来处理您的情况，以确保在继续之前存在两个服务变量。

angular.module('test', [])
  .controller('ControllerA', ControllerA)
  .controller('ControllerB', ControllerB)
  .factory('ServiceA', ServiceA)
  .factory('ServiceB', ServiceB);

function ControllerA($scope, ServiceA) {
  $scope.a = 'a';
  
  ServiceA.getString().then(function(){
    $scope.a = ServiceA.str;
  });
}

function ControllerB($scope, ServiceA, ServiceB) {
  $scope.b = 'b';
  $scope.ab = 'ab';
  
  ServiceB.getString().then(function(){
    $scope.b = ServiceB.str;
  });
  
　// --- this part is the answer ---
  var watch = $scope.$watchCollection(function(){
    return [ServiceA.str, ServiceB.str];
  }, function(){
    if (!ServiceA.str || !ServiceB.str) return;
    
    $scope.ab = ServiceA.str + ' and ' + ServiceB.str;
    watch(); // unregister watch
  });
  // --- end answer ---
}

function ServiceA($timeout, $q) {
  var service = {
    str: "",
    getString: getString
  }
  
  return service;
  
  function getString() {
    var d = $q.defer();
    
    $timeout(function(){
      service.str = "I'm string A";
      d.resolve();
    }, Math.random() * 3000);
    
    return d.promise;
  }
}

function ServiceB($timeout, $q) {
  var service = {
    str: "",
    getString: getString
  }
  
  return service;
  
  function getString() {
    var d = $q.defer();
    
    $timeout(function(){
      service.str = "I'm string B";
      d.resolve();
    }, Math.random() * 3000);
    
    return d.promise;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

<div ng-app='test'>
  <div ng-controller="ControllerA">{{a}}</div>
  <div ng-controller="ControllerB">
    {{b}}
    <br>{{ab}}
  </div>
</div>