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