angularjsは$ rootScopeの後にアクションを実行します。$ブロードキャストは完了しました

Question

私はanglejsを使用して1ページの管理アプリケーションを作成しました。アプリケーションには、ヘッダー、フッター、左のタブパネル、コンテンツ領域があります。このリンクに似ているものhttp://keenthemes.com/preview/metronic/theme/admin_2_angularjs/index.html#/dashboard.html

開始点は、ヘッダーコントローラー、フッターコントローラー、および左側のタブコントローラーを持つmain.jsです。私は、タブの選択に基づいてコンテンツエリア内の異なるページを読み込みます。これは$ stateProviderを使って以下のように設定します。約6つのタブがあります。 main.js

MyApp.controller('HeaderController', ['$scope', '$rootScope', '$timeout', function($scope, $rootScope, $timeout) { 
$scope.runSimulation = function(){  
     $rootScope.$broadcast('SaveAll').then(function(){ 
      //Run process on server when save all is finished on all 6 tabs 
     }); 
    } 
}]); 

MyApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { 

$urlRouterProvider.otherwise("/tab1"); 
    $stateProvider 
    // Tab1 
    .state('tab1', { 
     url: "/tab1", 
     templateUrl: path + "/views/tab1.html",    
     data: {pageTitle: 'First Page'}, 
     controller: "Tab1Controller", 
     resolve: { 
      deps: ['$ocLazyLoad', function($ocLazyLoad) { 
       return $ocLazyLoad.load({ 
        name: 'MyApp', 
        insertBefore: '#ng_load_plugins_before', 
        files: [ 
          path + 'js/controllers/Tab1Controller.js', 
        ] 
       }); 
      }] 
     } 
    }) 

    // Tab2 
    .state('tab2', { 
     url: "/tab2", 
     templateUrl: path + "/views/tab2.html",    
     data: {pageTitle: 'Second Page'}, 
     controller: "Tab2Controller", 
     resolve: { 
      deps: ['$ocLazyLoad', function($ocLazyLoad) { 
       return $ocLazyLoad.load({ 
        name: 'MyApp', 
        insertBefore: '#ng_load_plugins_before', 
        files: [ 
          path + 'js/controllers/Tab1Controller.js', 
        ] 
       }); 
      }] 
     } 
    })  

}]); 

の

コンテンツは、各タブコントローラのjsファイルは、データを取得し、操作するための一つのサービスが含まれています。つまり、Tab1Model、Tab2Modelなどです。各タブコントローラファイルの構造は、次のようなものです。同じ個体タブファイルの

コンテンツ

angular.module('MyApp').controller('Tab1Controller',['$scope', '$rootScope', 
function($scope, $rootScope, { 
    //Get data using tab1Model and update UI 

//----------- Save data ------------------------------------------ 
    $rootScope.$on('SaveAll', function() { 
     tab1Model.putData(arr); 
    }); 
]); 

//Data model 
angular.module('MyApp').factory('tab1Model', ['$rootScope', '$q', '$Http', function($rootScope, $q, $http){ 

//get data from database using $http get 
// .......some get code goes here..... 

//Save data to database using $http put 
model.putData = function(data){ 
    var deferred = $q.defer(); 
     $http.put("dummyurl", JSON.stringify(data)).then(
      function(response) { 
       deferred.resolve(response); 
      }, 
      function(response) { 
       deferred.reject(response); 
      }) 
     return deferred.promise; 
}; 

return model; 
}]); 

は、タブの残りのために行きます。 「SaveAll」をブロードキャストするヘッダーには1つの実行ボタンがあります。

今の質問は次のとおりです。

私は「SAVEALLは」各タブに終了したときに、サーバー上のいくつかのプロセスを実行したいです。約5-6のタブがあります。 「SaveAll」がすべてのタブで終了したことをどのように知ることができますか？ （個々のタブコントローラのjsファイルは、遅延ロードを使用して実行時にロードされます）

Answer 1

保存サービスを呼び出すときに同期パターンを使用する方が良いでしょう。 $ qパターンを使用してジョブを完了する単一の保存サービスを作成するか、http応答パターン（サービス後のサービス）を使用して同期を達成することができます。