使用ng-hide / ng-show隐藏导航栏

Question

我无法使用此导航栏显示其中一个导航栏，它显示了两个导航栏。我做错了什么？

查看：            

    <!-- Logged in -->
    <div ng-show="loggedIn">
      Navbar logged in
    </div>

    <!-- Logged out-->
    <div ng-hide="!loggedIn">
      Navbar logged out
    </div>

  </div>
</nav>

控制器：

.controller('mainCtrl', ['$scope', '$state', 'userService',
  function($scope, $state, userService) {

    $scope.loggedIn = userService.isLoggedIn();

    $scope.login = function() {
      userService.login();
      $state.go('home');
    };

    $scope.logout = function() {
      userService.logout();
      $state.go('login');
    };

  }
]);

Answer 1

删除“！” ng-hide：

<!-- Logged out-->
<div ng-hide="loggedIn">
  Navbar logged out
</div>

Answer 2

您需要更新条件

<div ng-hide="!loggedIn">

到

<div ng-show="!loggedIn">

Answer 3

如果你想以更好的性能解决这个问题，你不需要在DOM中保留隐藏的导航栏，你可以使用：

<!-- Logged in -->
<div ng-if="loggedIn">
  Navbar logged in
</div>

<!-- Logged out-->
<div ng-if="!loggedIn">
  Navbar logged out
</div>