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

Question

我有两个并行加载的控制器，控制器 A 调用服务 A，控制器 B 调用服务 B。控制器 B 需要控制器 A 请求的数据。（注意：Controller A 是普通控制器，所以我不能在 Controller 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>

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

Angular - waiting for request in other controller to complete

asynchronous

deferred

angularjs