Question

我使用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文件在运行时使用延迟加载加载）

Answer 1

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

angularjs在$ rootScope之后执行动作。$ broadcast已完成

1 个答案: