2014-11-14 50 views
0

我正在使用AngularJS,我需要一个全局的几个全局对象,可以被任何控制器在应用程序中访问。AngularJS中的异步全局变量

例如,我需要的一个对象是具有用户ID和其他属性的用户对象。这个用户对象来自数据库,通过ajax。所以我需要一种方法来设置该用户对象,然后初始化页面上使用的控制器。基本上给应用程序一个页面加载程序的第一次加载。

然后,如果该对象没有设置,我需要重定向。

有没有人有如何干净地做到这一点的想法?我一直在试图使用广播,但它的修饰意大利面代码。

目前我使用ui路由器,并有一个隐藏的视图与控制器GlobalsCtrl。 GlobalsCtrl使用服务来获取对象,然后$广播它们以便控制器可以初始化。但是......此广播只适用于初始网站加载。当更改$ location.paths时,由于已设置GlobalsCtrl变量,所以未广播该事件。

我可以添加一些if语句,但对我来说似乎很混乱。

请帮忙。谢谢!


Plunker - http://plnkr.co/edit/TIzdXOXPDV3d7pt5ah8i

var app = angular.module('editor.services', []); 
app.factory('AnalysisDataService', ['$http', function($http) { 
    var self = this; 

    self.activeAnalysis = {}; 

    self.openAnalysis = function(analysisId) { 
     return $http.get('api/v1/assignments/analysis/' + analysisId) 
      .success(function(data, status, headers, config) { 
       self.activeAnalysis = data; 
       return self.activeAnalysis; 
      }).error(function(data, status, headers, config) { 
       console.log("Error could not load analysis article."); 
      }).then(function(result) { 
       return self.activeAnalysis; 
      }); 
    }; 

    self.getAnalysis = function() { 
     return self.activeAnalysis; 
    }; 

    self.navigateToStep = function(step) { 
     $location.path('/analysis/summary'); 
    };   

    return { 
     open: self.openAnalysis, 
     get: self.getAnalysis, 
     navigate: self.navigateToStep, 
    } 
}]); 

问题是我需要一些其他的控制器的负载之前要设置的self.activeAnalysis变量。每个页面根据analysisId加载一个不同的数据集。

+3

显示您目前拥有的一些代码。听起来你只是想要一个共享服务,你可以在整个板子上注入。 – tymeJV 2014-11-14 16:01:14

+2

[angular service](https://docs.angularjs.org/guide/services)是为所有控制器/指令获取共享对象的正确概念。角度服务是单身汉。例如,您可以使用'$ http'服务处理所有AJAX请求,使用'$ cookies'服务来读取/写入浏览器cookie。您可以创建一个“用户”服务来读取所有控制器的访问者信息。 – shawnzhu 2014-11-14 16:15:32

+0

嗨,我用我的文件添加了一个Plunker:http://plnkr.co/edit/TIzdXOXPDV3d7pt5ah8i – RachelC 2014-11-14 16:16:02

回答

1

的一件事是使用路线上的resolveui.router,确保在转换到新状态之前解决任何承诺。事情是这样的:

.state('app.mymodule', {url: '/my-route/', 
    views:{ 
     'someView': { 
     templateUrl: '/views/someView.html', 
     controller: 'someController' 
     } 
    }, 
    resolve: { 
     someResolve: function (someService) { 
     return someService.getUserInfo(); 
     } 
    } 
    }) 

这里,$http呼叫someService.getUserInfo()做将过渡到状态之前解决。在该方法内部,只需在服务中设置响应中的数据,并将其在控制器中提供。