Question

我使用angular和ui-bootstrap定义了一个导航栏。有几个导航选项基于登录状态呈现：

如果用户或管理员已登录，则导航栏中应该有Logout选项。
如果管理员已登录，导航栏中会显示Admin选项
如果用户已登录，则导航栏中不会显示Admin，而是显示Profile链接。

我在这个项目中使用ui-router，并且根据文档，除非状态调用中包含{refresh : true}，否则子状态永远不会刷新父状态。但是，没有什么是基于另一个ui-view的状态来刷新一个ui-view的状态。

应用程序的主索引页面定义了两个ui-view元素：一个用于nav，另一个用于应用程序内容：

<body ng-app="app">
   <div ui-view="nav"></div>
   <div class="container-fluid">
       <div ui-view="appContent"></div>
   </div>
</body>

当我点击Logout导航选项时，我成功注销但导航选项不会更改，除非我刷新页面。

我的导航栏模板：

    <div class="navbar-collapse collapse" collapse="navbarCollapsed">
        <ul class="nav navbar-nav">
            <li>
                <a ui-sref="home">Home</a>
            </li>
            <li ng-if="!userState.isLoggedIn()">
                <a ui-sref="login">Login</a>
            </li>
            <li ng-if="userState.isLoggedIn() && !userState.isAdmin()">
                <a ui-sref="profile">Profile</a>
            </li>
            <li ng-if="userState.isAdmin()">
                <a ui-sref="admin">Admin</a>
            </li>
            <li ng-if="userState.isLoggedIn()">
                <a href="#" ng-click="logoutUser()">Logout</a>
            </li>
        </ul>
    </div>

和控制器：

angular.module('navigation')
.controller('NavCtrl', function($rootScope, $scope, $state, $log, $sce, authenticationService, userService) {
    "use strict";

    var user = authenticationService.getUser();

    $scope.userState = {

        isAdmin : function() {
            return user !== null && user.role === 'ADMIN';
        },
        isLoggedIn : function() {
            return user !== null;
        }
    };

    $scope.logoutUser = function() {
        userService.clearLocalState();
        $state.go('home', {}, {reload : true});
    };
});

使用{reload : true}参数选项，我会在注销时看到nav元素中的闪烁，但选项可见性不会更改。唯一有效的解决方案是手动页面刷新，我希望尽可能避免这种情况。

Answer 1

好吧，你必须加载导航栏视图的内容。没有整个页面刷新，这是可能的。使用$state对象。它有reload和其他手动操作您的观点的方法

Answer 2

Navbar模板：

<div class="navbar-collapse collapse" collapse="navbarCollapsed">
    <ul class="nav navbar-nav">
        <li>
            <a ui-sref="home">Home</a>
        </li>
        <li ng-if="!user">
            <a ui-sref="login">Login</a>
        </li>
        <li ng-if="user && user.role !== 'ADMIN'">
            <a ui-sref="profile">Profile</a>
        </li>
        <li ng-if="user.role === 'ADMIN'">
            <a ui-sref="admin">Admin</a>
        </li>
        <li ng-if="user !== null">
            <a href="#" ng-click="logoutUser()">Logout</a>
        </li>
    </ul>
</div>

和控制器：

angular.module('navigation')
  .controller('NavCtrl', function($rootScope, $scope, $state, $log, $sce,      authenticationService, userService) {
  "use strict";

   $scope.user = authenticationService.getUser();

   $scope.logoutUser = function() {
      userService.clearLocalState();
      $scope.user = authenticationService.getUser();
      //$state.go('home', {}, {reload : true});
   };
});

这是一个肮脏的“解决方案”，但如果您不想使用$ location reload，可能是一个解决方案。

登录/注销后Ui-Router导航栏选项未刷新

2 个答案: