6

我会以这样一个事实作为开头，我真的不知道这是否是实现我正在做的事情的最佳方式，而且我非常愿意接受更好的建议。

我有一个用户帐户系统，它使用OAUTH2它在我的数据库中查找用户信息并将其保存为变量，$rootScope.userInfo. 这驻留在附加到我的应用程序的控制器中body；在这里，我认为最高级别的控制器会先于其中的控制器加载，但显然不是。

如果我在有机会从我的数据库中加载它之前加载了一个尝试访问该$rootScope.userInfo对象的视图，它会引发一个 javascript 错误并中断。mainCtrlAngular

作为参考，这里有一个模板的粗略想法：

<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则没有时间加载，并且出现错误。

我怎样才能解决这个问题？

4

2 回答 2

14

您描述的问题是不建议在控制器之间共享数据的原因之一$rootScope：它会在两个控制器之间创建手动“不可见”依赖关系，当最终用户没有通过另一个控制器时，您必须手动修复它控制器呢。

推荐的解决方案是将用户加载逻辑移动到服务中，例如userProfileService，您将其注入到需要它的两个控制器中。然后它将被创建一次，并用于两个控制器。在这样的服务中，您可以在控制器请求时加载用户配置文件$http，并在下一个请求时从缓存中返回它。这样，依赖关系从两个控制器到共享服务，而不是从一个控制器到另一个控制器。

我不是 AngularJS 文档的忠实粉丝，但这些可能会有所帮助：DI、Creating Services和Injecting Services。

于 2013-08-22T08:11:10.003 回答
0

使用then以下命令代替成功并延迟子控制器的加载ng-include：

<body ng-controller="mainCtrl">
    <header>Content</header>
    <ng-include src="templatePath"></ng-include>        
</body>

将 HTML 移动到新模板中userprofile.html：

<div class='main-view' ng-controller="userProfile">
    <p>{{user.name}}</p>
    <p>{{user.email}}</p>
</div>

mainCtrl 内部的回调：

$http.get('/api/users/' + $cookies.id).
    then(function(data) {
        /* mainCtrl being the parent controller, simply exposing the 
           properties to $scope would make them available 
           to all the child controllers.*/
        $rootScope.userInfo = data.user[0];
        /* assign the template path to load the template and 
           instantiate the controller */
        $scope.templatePath = "userprofile.html";
    });
于 2013-08-22T08:08:55.397 回答