AngularJS：在ng-view之外刷新角度范围

OK, so I have a basic login page that when the user logs in I want to then display more details on the navbar at the top of the screen. When they click logout, this then goes away. This is working (in a way) however to get the navbar to change I need to refresh the page, which obviously does not happen when i just use routing to change what is in my ng-view.

好的，所以我有一个基本的登录页面，当用户登录时，我想在屏幕顶部的导航栏上显示更多细节。当他们点击退出时，它就会消失。这是在工作（在某种程度上），但要让导航栏更改我需要刷新页面，这显然不会发生，当我只是使用路由来改变我的ng视图中的内容。

When the user clicks 'log in' their username is stored in a service which is called using the login controller that is within the ng-view.

当用户单击“登录”时，他们的用户名存储在使用ng-view中的登录控制器调用的服务中。

authService.SetUsername(user.Username);

However I want this to have an effect in my navbar controller which is outside the ng-view.

但是我希望这在我的导航栏控制器中有效，这在ng-view之外。

Here you can see in my trimmed down navbar controller how this is being used.

在这里你可以看到我的修剪下来的导航栏控制器如何使用它。

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

    $scope.displayUsername = authService.GetUsername();

});

But displayusername is only changed when the page is refreshed and the controller is 'reloaded'. How do I get this to change instantly when the service storing the username is updated?

但只有在刷新页面并重新加载控制器时才会更改displayusername。如何更新存储用户名的服务时，如何立即更改？

2 个解决方案

#1

You can broadcast a login event:

您可以广播登录事件：

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

and your controller:

和你的控制器：

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

    $scope.displayUsername = authService.GetUsername();

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

#2

Create variable $rootScope.displayName.
创建变量$ rootScope.displayName。
Use {{ displayName }} in HTML markup for your navbar.
在导航栏的HTML标记中使用{{displayName}}。
Up on success on login page, update $rootScope.displayName.
登录页面成功后，请更新$ rootScope.displayName。
Praise AngularJS.
赞美AngularJS。

Usually, I recommend having object $rootScope.user where more information can be stored about user, not just displayName.

通常，我建议使用对象$ rootScope.user，其中可以存储关于用户的更多信息，而不仅仅是displayName。

#1