2015-05-26 29 views
0

好的,所以我有一個基本的登錄頁面,當用戶登錄時,我想在屏幕頂部的導航欄上顯示更多詳細信息。當他們點擊註銷時,這一切就會消失。這是工作(在一種方式),但是爲了讓navbar改變我需要刷新頁面,這顯然不會發生,當我只是使用路由來改變我的ng視圖中的內容。AngularJS:在ng-view外部刷新角度範圍

當用戶點擊「登錄」時,他們的用戶名將存儲在使用ng視圖內的登錄控制器調用的服務中。

authService.SetUsername(user.Username); 

但是我想要這個在我的導航欄控制器中的效果是在NG視圖之外。

在這裏,您可以在我的裁剪導航欄控制器中看到如何使用它。

app.controller('navbarController', function ($scope, authService, $cookies, $location) { 

    $scope.displayUsername = authService.GetUsername(); 

}); 

displayusername頁面被刷新,而且控制器「重載」時,才改變。如何在存儲用戶名的服務更新時立即更改此設置?

+0

你可以在這裏添加authService服務代碼來幫助你更多嗎? –

+0

你想刷新範圍?你不能刷新所有頁面嗎? –

回答

5

可以播放登錄事件:

.factory("authService", [ 
    "$rootScope", 
    function ($rootScope) { 
     return { 
      login: function() { 
       // do the login 
       $rootScope.$broadcast("login-done"); 
      } 
     } 
    } 
]); 

和控制器:

app.controller('navbarController', function ($scope, $rootScope, authService, $cookies, $location) { 

    $scope.displayUsername = authService.GetUsername(); 

    $rootScope.$on("login-done", function() { 
     $scope.displayUsername = authService.GetUsername(); 
    }); 
}); 
+0

由於他從$ rootScope進行廣播,因此可以在控制器中的$ scope上進行監聽。沒什麼大不了的,控制器的依賴性只有1個。不知道如果任何一種方式更有效率,否則 –

+0

工程就像一個魅力。以前不知道廣播服務。 – user3407039

0
  1. 創建變量$ rootScope.displayName。
  2. 在HTML標記中爲您的導航欄使用{{displayName}}。
  3. 登錄頁面成功後,更新$ rootScope.displayName。
  4. 讚美AngularJS。

通常,我建議擁有對象$ rootScope.user,其中可以存儲有關用戶的更多信息,而不僅僅是displayName。