javascript - 实现动态边栏，可刷新特定操作

我正在尝试构建一个动态边栏，该边栏根据当前用户状态显示元素。因此，如果用户已登录，则仅应显示某些元素，如果用户未登录，则应仅显示其他元素。

当前状态保存在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/