我正在尝试构建一个动态边栏,该边栏根据当前用户状态显示元素。因此,如果用户已登录,则仅应显示某些元素,如果用户未登录,则应仅显示其他元素。
当前状态保存在userService中。还有一个方法可以返回当前状态:
angular.module('app').service('userService', ['$http', 'base64', function ($http, base64) {
var user = {
auth: "",
ask: "",
mandant: ""
};
...
this.isloggedIn = function(){
if(user.auth != "" && user.ask != "" && user.mandant != "")
{
return true;
}
else
{
return false;
}
...
}]);
现在,我创建了一个小控制器:
angular.module('app')
.controller('sidebarController',['$scope', 'userService', function($scope, userService) {
$scope.loggedIn = userService.isloggedIn();
}]);
我的侧边栏如下所示:
<div class="scrollable" ng-controller="sidebarController">
<h1 class="scrollable-header app-name">Navigation</h1>
<div class="scrollable-content">
<div class="list-group" ui-turn-off='uiSidebarLeft'>
<a class="list-group-item green" href="#/login" ng-hide="loggedIn">Login</a>
<a class="list-group-item red" href="#/logout" ng-show="loggedIn">Logout</a>
</div>
</div>
</div>
目标:如果用户已注销,则侧边栏应仅显示login元素,如果用户已登录,则仅显示logout元素。
运行此命令后,边栏仅显示登录元素,但登录后边栏不会更改。如何强制边栏刷新?
最佳答案
你的问题是
$scope.loggedIn = userService.isloggedIn();
仅被调用一次:启动控制器时。您想要的是创建一个状态改变时(例如,登录后)都会被调用的函数:
angular.module('app').controller('sidebarController', ['$scope', 'userService', function($scope, userService) {
function refreshState() {
$scope.loggedIn = userService.isloggedIn();
}
refreshState();
$scope.login = function() {
// do login
// call refreshState() afterwards
refreshState();
}
}]);
关于javascript - 实现动态边栏,可刷新特定操作,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32399059/