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

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

10-11 22:22
查看更多