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

Question

I have an app that is loaded like so:

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();
            });
    }
}]);

Then in a different controller I want to load a template based on whether the user is logged in or not (ie if username is set):

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';
    }
}

How can I make DataController dependent on the username value asynchronously loaded on $rootScope?

I thought about using a promise, but I'm not sure how to pass that state to my DataController.

Thanks!

Answer 1

In your 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
            });
    }
}]);

In your controller:

$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';
    }
});

By default show a loading screen, inside the event handler check for user name and show the appropriate template