角度 - 他のコントローラの要求が完了するのを待っています

Question

私は2つのコントローラが並行してロードされており、コントローラAはサービスAを呼び出し、コントローラBはサービスBを呼び出します。コントローラBはコントローラAが要求しているデータを必要とします。 （コントローラAはコントローラであり、コントローラBではサービスAを呼び出せません）

両方のサービスコール（Ctrl AとCtrl Bからの）が完了した後でのみ、コントローラBがデータを処理する最良の方法はありますか？

私は$ qの例のいくつかを見ましたが、私は上記の状況でそれを実装するのが少し混乱しています。

Answer 1

私はあなたのケースを処理する前に両方のサービス変数が存在することを確認するコントローラBで$watchを1回使用して処理します。

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>