确保前另一个AngularJS控制器负载 [英] Ensuring one AngularJS controller loads before another
问题描述
我要preface这与事实,我真的不知道,如果这是实现我在做什么,我要更好的建议非常开放的最佳方式。
I'll preface this with the fact that I really have no idea if this is the best way to achieve what I'm doing and I'm very open to better suggestions.
我有使用用户帐户系统的oauth2
它得到查找用户信息在我的数据库,并将其保存为一个变量, $ rootScope .userInfo
。此驻留在其中添加到我的应用程序的体
控制器;在这里我的想法是最高级别的控制器将那些生活在它内部,但显然不是之前加载。
I've got a user account system using OAUTH2
which gets looks up user info in my database and saves it as a variable, $rootScope.userInfo
. This resides in a controller which is appended to my app's body
; here I was thinking that the highest-level controller would load before those that live within it, but apparently not.
如果我加载它试图之前访问此 $ rootScope.userInfo
对象视图我的 mainCtrl
已经有了机会从我的数据库加载它,它抛出一个JavaScript错误和角
休息。
If I load a view which tries to access this $rootScope.userInfo
object before my mainCtrl
has had a chance to load it in from my database, it throws a javascript error and Angular
breaks.
有关参考,这里的模板的一个粗略的想法:
For reference, here's a rough idea of the template:
<body ng-controller="mainCtrl">
<header>Content</header>
<div class='main-view' ng-controller="userProfile">
<p>{{user.name}}</p>
<p>{{user.email}}</p>
</div>
</body>
我加载 $ rootScope.userInfo
在 mainCtrl
是这样的:
$http.get('/api/users/' + $cookies.id).
success(function(data) {
$rootScope.userInfo = data.user[0];
console.log("User info is:");
console.log($rootScope.userInfo);
$scope.status = 'ready';
});
然后我 USERPROFILE
控件,我做的:
function userProfile($scope, $cookies, $http, $routeParams, $rootScope){
if($scope.status == 'ready'){
$scope.user = $rootScope.userInfo;
console.log("Double checking user info, here it is:");
console.log($rootScope.userInfo);
}
}
如果我从应用程序不同的页面不上 $ rootScope.userInfo
打电话来了,API有足够的时间来看看它和我的 USERPROFILE
页工作正常。但是,如果做一个完整的页面刷新,在 $ rootScope.userInfo
没有时间来加载和我得到的错误。
If I'm coming from a different page in the app which doesn't call on $rootScope.userInfo
, the API has enough time to look it up and my userProfile
page works fine. However if doing a full-page refresh, the $rootScope.userInfo
doesn't have time to load and I get errors.
我该如何解决这个问题?
How can I fix this?
推荐答案
您所描述的问题是,为什么不推荐的理由来使用控制器之间共享数据的一个 $ rootScope
:它会创建两个控制器之间手动隐形的依赖,你必须手动修复当最终用户并没有通过另一控制器还去了
The problem you describe is one of the reasons why it is not recommended to share data between controllers using $rootScope
: it creates a manual "invisible" dependency between two controllers, that you have to manually fix when the end user hasn't gone through the other controller yet.
推荐的解决方案是将用户加载逻辑移动到服务,比如 userProfileService
,你注入到需要它的两个控制器。然后它会创建一次,并用于两个控制器。在这样的服务时,控制器需要它,你可以装入 $ HTTP
用户配置文件,并在下一确实从缓存中返回。这样,依赖来自两个控制器进到共享服务,而不是从一个控制器到另一个
The recommended solution is to move the user loading logic into a service, say userProfileService
, which you inject into both controllers that need it. It will then be created once, and used for both controllers. In such a service you could load the user profile with $http
when a controller asks for it, and return it from cache when the next one does. This way, the dependency goes from both controllers to a shared service, rather than from one controller to another.
我不是AngularJS文档,一个巨大的风扇,但这些可能会帮助: DI ,的Creating服务和的注射服务。
I'm not a huge fan of the AngularJS documentation, but these might help: DI, Creating Services, and Injecting Services.
这篇关于确保前另一个AngularJS控制器负载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!