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

How can I make an AngularJS controller depend on a value loaded on the rootScope via ajax?

本文关键字：加载 rootScope ajax AngularJS 何使 控制器 依赖于      更新时间：2023-09-26

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

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。

谢谢！

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

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

相关文章：