AngularJS: 在 ng-view 之外刷新 angular 范围

Question

好的，所以我有一个基本的登录页面，当用户登录时，我想在屏幕顶部的导航栏上显示更多详细信息。当他们单击注销时，它就会消失。这是有效的（在某种程度上）但是为了让导航栏发生变化我需要刷新页面，当我只是使用路由来改变我的 ng-view 中的内容时显然不会发生这种情况。

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

authService.SetUsername(user.Username);

但是我希望这对我在 ng-view 之外的导航栏控制器有影响。

在这里，您可以在我精简的导航栏控制器中看到它是如何使用的。

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

    $scope.displayUsername = authService.GetUsername();

});

但是displayusername只有在刷新页面并且控制器为'reloaded'时才发生变化。当存储用户名的服务更新时，我如何让它立即改变？

Answer 1

您可以广播登录事件：

.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();
    });
});

Answer 2

创建变量$rootScope.displayName.
在导航栏的 HTML 标记中使用 {{ displayName }}。
登录页面成功后，更新 $rootScope.displayName.
好评AngularJS.

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

AngularJS: 在 ng-view 之外刷新 angular 范围

AngularJS: Refresh angular scope outside of ng-view

javascript

angularjs

angularjs-service