AngularJS:在ng-view之外刷新angular作用域

AngularJS: Refresh angular scope outside of ng-view

本文关键字：刷新 angular 作用域 ng-view AngularJS      更新时间：2023-09-26

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

当用户点击' login '时，他们的用户名存储在一个服务中，该服务使用ng-view中的login控制器调用。

authService.SetUsername(user.Username);

然而，我希望它在导航栏控制器中有一个效果，它在ng-view之外。

你可以在我的导航栏控制器中看到它是如何被使用的。

app.controller('navbarController', function ($scope, authService, $cookies, $location) {
    $scope.displayUsername = authService.GetUsername();
});

但是displayusername只有在刷新页面和"重新加载"控制器时才会改变。当存储用户名的服务更新时，我如何使其立即更改?

你可以广播一个登录事件:

.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();
    });
});
  1. 创建$rootScope.displayName.
  2. 在导航栏中使用{{displayName}}标记。
  3. 登录成功后，更新$rootScope.displayName.
  4. 赞美AngularJS。

通常，我建议使用对象$rootScope。

相关文章：