javascript - 尝试使用 Angular rootScope 跨 Controller 持久保存数据，但总是未定义

Question

我有一个管理员登录页面。当用户以管理员身份成功登录后，我想在用户访问的所有页面顶部显示:

<!-- nav bar -->
<div>
    <span ng-show="$root.isAdmin">(ADMIN)</span>
</div>

我尝试使用 $rootScope 来完成此操作，但我一直得到 undefined:

// controller for logging in
app.controller('AdminLoginCtrl', [ '$rootScope', '$scope', 'stateParams', 'loginService', function($rootScope, $scope, $stateParams, loginService) {
    loginService.success(function() {
        $rootScope.isAdmin = true;
        console.log($rootScope.isAdmin);   // returns true
        $location.path("/login_success");
    });
}]);

// some other controller AFTER user is logged in as admin
app.controller('BlahCtrl', ['$rootScope', '$scope', function($rootScope, $scope) {
    console.log($rootScope.isAdmin);   // returns 'undefined'
});

还有一些其他类似的主题，但不适用于我:

(我没有注入(inject)问题):

$rootscope value undefined in Controller

(我的其他 Controller 肯定在登录后被调用，所以应该设置 $rootScope.isAdmin):

AngularJS - Cannot access RootScope

(我没有订购问题):

Angular $rootScope.$on Undefined

其他解决方案可能是根本不使用$rootScope，只使用服务来保存共享数据。但是，如果我有 10 个以上的 Controller ，是否可以在每个 Controller 中执行此操作:

app.controller('...', ['$scope', 'checkAdminService', function($scope, checkAdminService) {
    $scope.isAdmin = checkAdminService.getIsAdmin()
}]);

然后:

<span ng-show="isAdmin">(ADMIN)</span>

这是可以接受的还是更麻烦？为了完整起见，为什么 $rootScope 解决方案根本不起作用？

Answer 1

使用 $rootScope 确实是一种不好的做法。最好的解决方案是您自己建议创建一个服务来存储您想要在不同 Controller 之间共享的信息。在几个位置调用这个方法是没有问题的……

为什么不为页面的顶部定义一个单独的 Controller ，它将是唯一一个验证用户是否为管理员的 Controller ？页面的其他部分可以由不同的 Controller 控制。

这个例子将解释如何使用多个 Controller ，当然这也可以通过路由器来实现。