Angular 1.x异步存入$rootScope的变量无法在视图中访问

你遇到的这个问题本质上是Angular的脏检查循环（Digest Cycle）没有被触发导致的。当异步请求完成后，你给$rootScope.userLoggedIn赋了值，但此时Angular并没有自动检测到这个变化，所以视图没有更新。而打开调试控制台时，可能间接触发了digest循环（比如控制台的某些操作、Angular调试工具的监听），所以视图又正常了。

下面给你几个可行的解决方案，从快速修复到最佳实践都有：

方案1：手动触发脏检查循环 #

在异步请求的回调里，赋值后手动触发digest循环。不过要注意先判断当前是否已经在digest循环中，避免报错：

angularApp.controller('mainController', ['$scope', '$rootScope', '$http', function($scope, $rootScope, $http){ 
    var checkIfAuthenticated = function(){ 
        return $http.get('/api/isAuthenticated'); 
    }; 
    checkIfAuthenticated() 
    .then(function(res) { 
        if(res.status===200){ 
            console.log("Success"); 
            $rootScope.userLoggedIn = true; 
            // 手动触发digest，避免重复触发报错
            if (!$rootScope.$$phase) {
                $rootScope.$apply();
            }
        } 
    })
    .catch(function(err) {
        // 处理失败情况，同样触发digest
        console.error("Authentication check failed:", err);
        $rootScope.userLoggedIn = false;
        if (!$rootScope.$$phase) {
            $rootScope.$apply();
        }
    }) 
}]);

方案2：用服务管理认证状态（最佳实践） #

直接依赖$rootScope不是Angular的最佳实践，更好的方式是创建一个单例服务来管理认证状态，这样所有控制器都可以共享这个状态，而且服务的属性变化会自动被Angular检测到：

第一步：创建认证服务 #

angularApp.factory('AuthService', ['$http', '$rootScope', function($http, $rootScope) {
    var authService = {
        isLoggedIn: false
    };

    // 检查认证状态的方法
    authService.checkAuthentication = function() {
        return $http.get('/api/isAuthenticated')
            .then(function(res) {
                authService.isLoggedIn = res.status === 200;
                // 广播状态变化事件，方便其他控制器监听
                $rootScope.$broadcast('auth:statusChanged', authService.isLoggedIn);
                return authService.isLoggedIn;
            })
            .catch(function(err) {
                authService.isLoggedIn = false;
                $rootScope.$broadcast('auth:statusChanged', false);
                console.error("Auth check failed:", err);
                return false;
            });
    };

    return authService;
}]);

第二步：在mainController中调用服务 #

angularApp.controller('mainController', ['$scope', 'AuthService', function($scope, AuthService){ 
    // 初始化检查认证状态
    AuthService.checkAuthentication();
}]);

第三步：在其他控制器中使用状态 #

你可以直接绑定服务的属性，或者监听状态变化事件：

angularApp.controller('otherController', ['$scope', 'AuthService', function($scope, AuthService){ 
    // 直接绑定服务的属性，自动同步变化
    $scope.userLoggedIn = AuthService.isLoggedIn;

    // 或者监听状态变化事件，确保不会错过初始赋值
    $scope.$on('auth:statusChanged', function(event, isLoggedIn) {
        $scope.userLoggedIn = isLoggedIn;
    });
}]);

方案3：路由Resolve提前获取状态 #

如果你的应用使用了Angular路由，可以在路由配置中用resolve提前获取认证状态，这样进入视图前状态就已经准备好了，避免异步加载的问题：

路由配置 #

angularApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/yourRoute', {
            templateUrl: 'yourView.html',
            controller: 'otherController',
            resolve: {
                // 提前获取认证状态，等待请求完成后再加载视图
                authStatus: ['AuthService', function(AuthService) {
                    return AuthService.checkAuthentication();
                }]
            }
        });
}]);

在控制器中使用resolve返回的值 #

angularApp.controller('otherController', ['$scope', 'authStatus', function($scope, authStatus){ 
    // 直接使用resolve返回的认证状态
    $scope.userLoggedIn = authStatus;
}]);

为什么打开调试控制台会恢复正常？ #

当你打开浏览器调试控制台时，Angular的调试工具（比如AngularJS Batarang）或者浏览器的某些操作会间接触发Angular的digest循环，这时候Angular就检测到了$rootScope.userLoggedIn的变化，视图也就更新了。

内容的提问来源于stack exchange，提问作者Sean