javascript - AngularJS:刷新 ng-view 之外的 Angular 范围

Question

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

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

authService.SetUsername(user.Username);

但是我希望这对我的导航栏 Controller (位于 ng-view 之外)产生影响。

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

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

    $scope.displayUsername = authService.GetUsername();

});

但是 displayusername 仅在刷新页面并且“重新加载” Controller 时才会更改。当存储用户名的服务更新时，如何立即更改此设置？

Answer 1

您可以广播登录事件:

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

和你的 Controller :

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

    $scope.displayUsername = authService.GetUsername();

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