AngularJS：在ng-view

Question

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

当用户点击“登录＆＃39;他们的用户名存储在一个服务中，该服务使用ng-view中的登录控制器进行调用。

authService.SetUsername(user.Username);

但是我想让它在我的导航栏控制器中生效，这在ng-view之外。

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

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

    $scope.displayUsername = authService.GetUsername();

});

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

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

1. 创建变量$ rootScope.displayName。
2. 在导航栏的HTML标记中使用{{displayName}}。
3. 登录页面成功，更新$ rootScope.displayName。
4. 赞美AngularJS。

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