使用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>