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>