Асинхронное получение данных в AngularJS

Question

Я хочу, чтобы создать ярлык, который показывает имя пользователя, вошедшего в систему:

<p style="color:white;font-weight:bolder;font-size:20px;padding-left:15px" title="Enter">{{userName}} Welcome</p> 

В мой контроллер я проверил, если пользователь был идентифицирован:

$scope.initial = function() { 
     $http.get('Accounts/UserIsAuthenticated').success(function (response) { 
      // Accounts/UserIsAuthenticated check whether user is authenticated or not, and return bool value 
      debugger; 
      if (response == 'True') { 
       $rootScope.showLogin = false; 
       $rootScope.showWelcome = true; 
       $scope.userName = getUserName(); 
       $rootScope.showLogout = true; 

      } 
      else { 
       $rootScope.showLogin = true; 
       $rootScope.showWelcome = false; 
       $rootScope.showLogout = false; 
      } 

     }); 
    }; 
    function getUserName() { 
     $http.get('Accounts/GetUserName').success(function (response) { 
      return response; 
     }); 
    } 

{{userName}} устанавливается в undefined. Я знаю, что getUserName() требует времени для ответа, так как я могу его исправить?

Edit: я изменить мой код:

$scope.initial = function() { 
     $http.get('Accounts/UserIsAuthenticated').success(function (response) { 
      if (response == 'True') { 
       $rootScope.showLogin = false; 
       $rootScope.showWelcome = true; 
       getUserName().then(function (username) { 
        debugger; 
        $scope.username = username; 
       }); 

       $rootScope.showLogout = true; 

      } 
      else { 
       $rootScope.showLogin = true; 
       $rootScope.showWelcome = false; 
       $rootScope.showLogout = false; 
      } 

     }); 
    }; 

    function getUserName() { 
     $http.get('Accounts/GetUserName'); 

    } 

Но это не работает! в чем проблема?

Answer 1

Изменить GetUserName к этому:

function getUserName() { 
    // return the promise 
    return $http.get('Accounts/GetUserName'); 
} 

Затем использовать его как это:

if (response == 'True') { 
    $rootScope.showLogin = false; 
    $rootScope.showWelcome = true; 
    // use the promise 
    getUserName().then(function(username){ 
     $scope.username = username; 
    }); 
    $rootScope.showLogout = true; 
} 

Или просто изменить GetUserName к этому:

function setUserName() { 
    $http.get('Accounts/GetUserName').success(function (response) { 
     $scope.username = response; 
    }); 
}