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 に答える