$rootScope.$broadcast 完成后 angularjs 执行操作答案

【问题标题】：angularjs perform action after $rootScope.$broadcast is complete$rootScope.$broadcast 完成后 angularjs 执行操作
【发布时间】：2016-11-20 22:50:13
【问题描述】：

我使用 angularjs 创建了一个单页管理应用程序。该应用程序具有页眉、页脚、左侧选项卡面板和内容区域。类似于此链接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 等。每个 tabcontroller 文件的结构如下所示。

单个标签文件的内容

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”的运行按钮。

现在的问题是：

当每个选项卡上的“SaveAll”完成时，我想在服务器上运行一些进程。大约有 5-6 个标签。我怎么知道所有选项卡上的“SaveAll”都已完成？（单个选项卡控制器 js 文件在运行时使用延迟加载加载）

【问题讨论】：

如果您只有一个选项卡服务，您可以跟踪当前有多少选项卡处于活动状态并且所有请求都将通过该一项服务，那么会简单得多。然后你可以使用 promise 数组和 $q.all() 来解决所有的 promise 都解决了

标签： angularjs

【解决方案1】：

如果在调用保存服务时使用同步模式会更好。您可以创建使用 $q 模式的单个保存服务并完成工作，或者您可以使用 http 响应模式（服务后服务）来实现同步。

【讨论】：