Question

我的路线如下：

app.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
      .when('/home', {
          templateUrl: 'partials/home.html',
          controller: 'PageCtrl'
      })
      .when('/about', {
          templateUrl: 'partials/about.html',
          controller: 'PageCtrl'
      })
      .otherwise({
          redirectTo: '/home'
      });
}]);

我的查看文件如下所示：

<body>
  <header>
    <!-- show below nav section if I am on "home" page-->
    <nav class="menu-for-home">
      <h1>menus when on home page</h1>
    </nav>
    <!-- show below nav section if I am on "about" page-->
    <nav class="menu-for-about">
      <h1>menus when on about page</h1>
    </nav>
  </header>
  <div class="main-body-container-wrap" data-ng-view >
    <!-- NgViews will be rendered here -->
  </div>
</body>

正如您在上面的代码中看到的，我有两个不同的导航部分，稍后我会将它们移动到单独的部分中，我喜欢根据当前我所在的页面加载这些部分。

Answer 1

我宁愿在PageCtrl中使用基于$ scope变量的ng-show和ng-hide。或者如果您认为菜单会增长，可能会ng-switch

类似的东西：

<body>
  <header>
    <!-- show below nav section if I am on "home" page-->
    <nav class="menu-for-home" data-ng-show="showHome">
      <h1>menus when on home page</h1>
    </nav>
    <!-- show below nav section if I am on "about" page-->
    <nav class="menu-for-about" data-ng-hide="showHome">
      <h1>menus when on about page</h1>
    </nav>
  </header>
  <div class="main-body-container-wrap" data-ng-view >
    <!-- NgViews will be rendered here -->
  </div>
</body>

或使用ng-switch：

<body>
  <header ng-switch="currentHeader">
    <!-- show below nav section if I am on "home" page-->
    <nav class="menu-for-home" data-ng-switch-default>
      <h1>menus when on home page</h1>
    </nav>
    <!-- show below nav section if I am on "about" page-->
    <nav class="menu-for-about" data-ng-switch-when="about">
      <h1>menus when on about page</h1>
    </nav>
  </header>
  <div class="main-body-container-wrap" data-ng-view >
    <!-- NgViews will be rendered here -->
  </div>
</body>

根据路线显示部分 - angularjs

1 个答案: