登录AngularJS后显示用户信息

Question

我正在构建AngularJS应用程序，当用户登录时，我想在页面的标题中显示用户信息。诸如“ Welcome，{{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>

当我启动应用程序时，登录的用户为空，因此我只会看到“欢迎使用”（稍后将对此进行修复），但是登录后，我将重定向到另一个局部视图，但标题中没有任何变化。 我显然很想念什么，但我只是想不通。

谢谢。

Answer 1

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

您能尝试添加它并检查接下来会发生什么吗。

登录AngularJS后显示用户信息

问题描述

1 个解决方案

解决方案1
0 2013-07-25 00:59:39

登录AngularJS后显示用户信息

问题描述

1 个解决方案

解决方案1 0 2013-07-25 00:59:39

解决方案1
0 2013-07-25 00:59:39