Question

我想知道是否有一种方法可以在用户通过身份验证后显示垂直和水平导航栏。

我的代码适用于水平导航栏：

<div class="navbar navbar-inverse navbar-fixed-top" role="navigation" data-ng-controller="indexController">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand">
        <img src="/images/AltheaLogo.png" alt="AltheaDx" style="margin-top: -13px; background-color: #E0E0E0 ">
      </a>
      <button class="btn btn-success navbar-toggle" data-ng-click="navbarExpanded = !navbarExpanded">
        <span class="glyphicon glyphicon-chevron-down"></span>
      </button>
    </div>
    <div class="collapse navbar-collapse" data-collapse="!navbarExpanded">
      <ul class="nav navbar-nav navbar-right">
        <!-- ReSharper disable once Html.IdNotResolved -->
        <li data-ng-hide="!authentication.isAuth"><a href="#/dashboard">Dashboard</a></li>
        <!-- ReSharper disable once Html.IdNotResolved -->
        <li data-ng-hide="!authentication.isAuth"><a href="#/physicians">Physicians</a></li>
        <!-- ReSharper disable once Html.IdNotResolved -->
        <li data-ng-hide="!authentication.isAuth"><a href="#/patients">Patients</a></li>
        <!-- ReSharper disable once Html.IdNotResolved -->
        <li data-ng-hide="!authentication.isAuth"><a href="#/orders">Order Products</a></li>
        <!-- ReSharper disable once Html.IdNotResolved -->
        <li data-ng-hide="!authentication.isAuth"><a href="#/users">Users</a></li>
        <li data-ng-hide="!authentication.isAuth"><a href="#">Loged in as: {{authentication.userName}}</a></li>
        <li data-ng-hide="!authentication.isAuth"><a href="" data-ng-click="logOut()">Logout</a></li>
      </ul>
    </div>
  </div>
</div>

垂直导航栏的目的是允许用户查看不同的页面。例如，如果他们正在查看医生列表，垂直菜单将允许他们查看医生的更多细节或添加医生。或者这是一个糟糕的设计？如果是这样，有什么更好的方法来解决这个问题？

Answer 1

为什么不考虑将垂直导航栏实现为指令并将其托管在主布局的列中？在垂直导航栏指令中，您可以使用其他指令来满足特定功能。

获得该列后，您可以使用ng-hide或ng-if仅在用户登录时显示

<div class='col-md-2' data-ng-show='authentication.isAuth'}>
  <vertical-nav>
    <previous-bookings></previous-bookings>
    <doctor-info></doctor-info>
  </vertical-nav>
</div>

登录后显示垂直和水平导航栏

1 个答案: