如何使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類依賴於用戶名值異步LO在$ 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'; 
    } 
}); 

默認顯示加載屏幕，事件處理程序檢查用戶名內，並顯示相應的模板