登录AngularJS后显示用户信息

Question

I am building an AngularJS application and I would like to show user info in the header of the page when user is logged in. Something like "Welcome,{{username}}". 我正在构建AngularJS应用程序，当用户登录时，我想在页面的标题中显示用户信息。诸如“ Welcome，{{username}}”之类的东西。

I have created a SessionHandler service where I keep the information about the user. 我创建了一个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);

I have tried creating a directive 我尝试创建指令

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();
            }
        }
    }
});

my header template is simple.. 我的标题模板很简单。

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

my main app module looks like this 我的主应用程序模块如下所示

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;
            }
        });
    });

and my login Controller which is in Login module calls a method on the server and after successful login sets logged user by calling SetLoggedUser() method on SessionHandler. 登录模块中的我的登录控制器调用服务器上的方法，并在成功登录后通过调用SessionHandler上的SetLoggedUser（）方法设置登录用户。

my index 我的索引

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

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

When I start my application logged user is empty so I only see Welcome (I will fix this later) but after I login I am redirected to another partial view but nothing changes in the header. 当我启动应用程序时，登录的用户为空，因此我只会看到“欢迎使用”（稍后将对此进行修复），但是登录后，我将重定向到另一个局部视图，但标题中没有任何变化。 I am obviously missing something but I just can't figure out what. 我显然很想念什么，但我只是想不通。

Thank you. 谢谢。

Answer 1

In your header directive you are missing the dependency or you can say reference to your SessionHandler service. 在标头指令中，您缺少依赖项，或者可以说是对SessionHandler服务的引用。

Can you try to add that and check what happens next.. 您能尝试添加它并检查接下来会发生什么吗。

登录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