如何使AngularJS控制器依赖于通过Ajax在rootScope上加载的值？

Question

我有一个这样加载的应用程序：

app.js：

angular.module('App', []).run(['$rootScope', '$q', 'SessionManager', 'EndpointService',
function ($rootScope, $q, SessionManager, EndpointService) {
    $rootScope.username = SessionManager.getUsername();
    if (!$rootScope.username) {
        EndpointService.getUser()
            .success(function (data) {
                data = angular.fromJson(data.data);
                SessionManager.setUsername(data['username']);
                $rootScope.username = SessionManager.getUsername();
            });
    }
}]);

然后在另一个控制器中，我想根据用户是否登录（即，如果设置了用户名）来加载模板：

DataController.js：

function DataController($scope, $state, $stateParams, $http, $log, $location, $rootScope, $q) {
    if($rootScope.username) {
        var template = 'static/partials/auth_table.html';
    } else {
        var template = 'static/partials/login.html';
    }
}

如何使DataController依赖于$ rootScope异步加载的用户名值？

我考虑过使用Promise，但是我不确定如何将该状态传递给DataController。

谢谢！

Answer 1

在您的app.js

angular.module('App', []).run(['$rootScope', '$q', 'SessionManager', 'EndpointService',
function ($rootScope, $q, SessionManager, EndpointService) {
    $rootScope.username = SessionManager.getUsername();
    if (!$rootScope.username) {
        EndpointService.getUser()
            .success(function (data) {
                data = angular.fromJson(data.data);
                SessionManager.setUsername(data['username']);
                $rootScope.username = SessionManager.getUsername();
                // after this step, broadcast the event
                $rootScope.$broadcast('user-loggedin');
               // pass data if required
            });
    }
}]);

在您的控制器中：

$scope.$on('user-loggedin', function(event, data) {
    var template;
    // do what you want to do
    if($rootScope.username) {
       template = 'static/partials/auth_table.html';
    } else {
       template = 'static/partials/login.html';
    }
});

默认情况下，显示加载屏幕，在事件处理程序中检查用户名并显示适当的模板