0

我正在构建一个 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>

我的主应用程序模块看起来像这样

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>

当我启动我的应用程序时，登录的用户是空的，所以我只看到欢迎（我稍后会解决这个问题）但是在我登录后我被重定向到另一个部分视图，但标题中没有任何变化。我显然错过了一些东西，但我就是不知道是什么。

谢谢你。

4

1 回答 1

0

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

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

于 2013-07-25T00:59:39.957 回答