实现动态侧边栏，刷新特定操作

Question

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

当前状态保存在userService中。还有一个方法，就是return当前状态：

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>

目标： 如果用户已注销，侧边栏应该只显示登录元素，如果用户已登录，则只显示注销元素。

运行后，侧边栏只显示登录元素，但登录后侧边栏没有变化。如何强制刷新侧边栏？

Answer 1

你的问题是

$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();
    }
}]);

实现动态侧边栏，刷新特定操作

Implement a dynamic sidebar, which refresh on particular actions

javascript

sidebar

angularjs

mobile-angular-ui