ngHide 指令仅在页面刷新后与 ngRoute 模块一起使用

当我登录我的应用程序时，我希望登录和注册按钮从导航中消失，因此如果登录成功并且从服务器收到令牌，我将使用 ng-hide 指令，我将其存储在 cookie 中。

导航是索引.html文件的一部分。

因为我使用的是角度路由，所以登录成功时，索引.html不会再次加载，而是通过 ng-view 指令呈现主页。

问题是我必须刷新页面才能使用 ng-hide。我假设这是因为ng-hide是索引.html页面的一部分，该页面不会重新加载。

希望有一个 bette 解决方案，而不是每次有人登录时刷新页面。

这是我的一些相关代码。

.HTML

<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
                <i class="fa fa-bars"></i>
            </button>
            <a class="navbar-brand page-scroll" href="#/">
                <i class="fa fa-play-circle"></i>  <span class="light">Webnar</span>
            </a>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
            <ul class="nav navbar-nav">
                <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                <li class="hidden">
                    <a href="#page-top"></a>
                </li>
                <li>
                    <a class="page-scroll" href="#about">Webinars</a>
                </li>
                <li ng-hide="token">
                    <a class="page-scroll" href="#/login">Login</a>
                </li>
                <li ng-show="token">
                    <a class="page-scroll " href="#/create">Add a webinar</a>
                </li>
                <li ng-hide="token">
                    <a class="page-scroll btn btn-default " href="#/signup">Sign Up</a>
                </li>
                <li ng-show="token" >
                  <a class="page-scroll btn btn-default" ng-click="logOut()">Logout</a>
                </li>
            </ul>
        </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

应用.js

var webinarApp = angular.module('webinarApp', ['ngCookies', 'ngRoute']);
webinarApp.config(function($routeProvider){
    $routeProvider
    .when('/', {
      templateUrl: './home.html',
      controller: 'mainController'
    })
    .when('/signup', {
      templateUrl: './signup.html',
      controller: 'mainController'
    })
    .when('/login', {
      templateUrl: './login.html',
      controller: 'mainController'
    })
    .when('/create', {
      templateUrl: './create.html',
      controller: 'mainController'
    })
});
webinarApp.controller('mainController', ['$scope', '$http', '$cookies', '$location', function($scope, $http, $cookies, $location){
  $scope.welcomeMessage = '';
  $scope.users = [];
  $scope.searchQuery = "";
  $scope.orderByField = 'name';
  $scope.newUser = {};
  $scope.logInUser = {};
  $scope.webinars = [];
  $scope.newWebinar = {};
  $scope.isDisabled = false;

  // ============== Users ================
  $scope.getUsers = function(){
    $http.get('/api/users').then(function(response){
      $scope.users = response.data;
    });
  };
  $scope.getUsers();
  $scope.createUser = function(){
    $http.post('/api/users', $scope.newUser).then(function(response){
      console.log(response.data)
      $scope.users.push(response.data);
      $scope.newUser = {};
      $location.path('/login');
    });
  };
  $scope.obtainToken = function(){
    $http.post("/api/users/authentication_token", $scope.logInUser).then(function(reponse){
      $scope.token = reponse.data.token;
      console.log($scope.token);
      $cookies.put('token', $scope.token);
      $location.path('/')
    });
  };