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上异步加载的用户名值？

我考虑过使用一个承诺，但我不确定如何将该状态传递给我的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';
    }
});

默认显示加载屏幕，在事件处理程序内检查用户名并显示相应的模板

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

1 个答案: