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