Question

我正在构建一个AngularJS应用程序，我希望在用户登录时在页面标题中显示用户信息。例如“欢迎，{{username}}”。

我创建了一个SessionHandler服务，用于保存用户的信息。

module Shared{
    export class SessionHandler implements ISessionHandler {

            loggedUser: string;

            SetLoggedUser(user: string) {
                this.loggedUser = user;
            }

            GetLoggedUser(): string {
                return this.loggedUser;
            }
     }
}
angular.module("MainApp").service("SessionHandler", Shared.SessionHandler);

我尝试过创建指令

angular.module("MainApp").directive("myheader", function () {
    return {
        restrict: "E",
        templateUrl: "/app/shared/partials/header.html",

        controller: function ($scope, SessionHandler: Shared.ISessionHandler) {

            $scope.LoggedUser = function () {
                SessionHandler.GetLoggedUser();
            }
        }
    }
});

我的标题模板很简单..

  <span>{{LoggedUser()}}</span>

我的主app模块看起来像这样

angular.module("MainApp", ['ui.bootstrap','Login', 'Module2'])
    ...
    .run(($rootScope: ng.IRootScopeService, $location: ng.ILocationService, SessionHandler: Shared.ISessionHandler) => {
        $rootScope.$on("$routeChangeStart", (event, next, current) => {
            if (!SessionHandler.IsUserLoggedIn()) {
                $location.path("/login");
            }
            if (next.templateUrl == "/app/module/login/partials/login.html") {
                SessionHandler.ClearSession();
                return;
            }
        });
    });

和登录模块中的登录控制器调用服务器上的方法，成功登录后通过调用SessionHandler上的SetLoggedUser（）方法设置登录用户。

我的索引

<html data-ng-app="MainApp">
<head>
</head>
<body>
<div class="container-fluid">
        <myheader></myheader>

        <div data-ng-view=""></div>
    </div>
</body>
</html>

当我启动我的应用程序时，登录用户为空，所以我只看到欢迎（我稍后会修复此问题），但在登录后，我被重定向到另一个局部视图，但标题中没有任何变化。我显然错过了一些东西，但我无法弄清楚是什么。

谢谢。

Answer 1

在您的header指令中，您缺少依赖项，或者您可以说对SessionHandler服务的引用。

您可以尝试添加它并检查接下来会发生什么......

登录AngularJS后显示用户信息

1 个答案: