angularjs在$ rootScope之后执行操作$ broadcast已完成
问题描述:
我已经使用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等。每个Tab控制器文件的结构如下所示。
个别内容标签文件
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”的运行按钮。
现在的问题是:
我想在服务器上运行某些程序时,“白水”每个选项卡上完成。大约有5-6个标签。我如何知道所有选项卡上的“SaveAll”已完成? (单个标签控制器js文件在运行时使用延迟加载加载)
答
如果在调用保存服务时使用同步模式会更好。您可以创建使用$ q模式并完成作业的单一保存服务,也可以使用http响应模式(service after service)来实现同步。
如果您只有一个选项卡服务,您可以跟踪当前有多少个选项卡处于活动状态,并且所有请求都会通过该服务,那么将更加简单。然后你可以使用promise数组和'$ q.all()'来解决所有的promise何时解决 – charlietfl