如何使用 Ionic 在一个 url 中呈现多个视图答案

【问题标题】：How are multiple views rendered in one url using Ionic如何使用 Ionic 在一个 url 中呈现多个视图
【发布时间】：2015-08-10 21:21:02
【问题描述】：

我打算在离子应用程序启动时在默认页面中呈现选项卡和导航栏。

我已经能够从互联网上得到这个确切的功能，并通过点击和尝试。但是我仍然不确定在应用程序的同一页面上拥有导航栏和选项卡的哪一部分很重要。

我有一个名为 menu.html 的文件，其中包含导航栏的代码。

看起来像这样：

<ion-side-menus>

       <ion-side-menu-content>
          <ion-nav-bar class="bar-light">
            <ion-nav-back-button>
            </ion-nav-back-button>

            <ion-nav-buttons side="left">
              <button class="button button-icon button-clear ion-navicon" menu-toggle="left">
              </button>
            </ion-nav-buttons>

          <!-- <ion-nav-buttons side="right">
              <button class="button button-icon button-clear ion-more" menu-toggle="right">
              </button>
            </ion-nav-buttons>
          </ion-nav-bar>
        -->

          <ion-nav-buttons side="right">
          <button class="button button-icon ion-more" ng-click="popover.show($event)"></button>
        </ion-nav-buttons>

          <ion-nav-view name="menuContent"></ion-nav-view>
        </ion-side-menu-content> 

        <ion-side-menu side="left">
          <ion-header-bar class="bar-assertive">
            <h1 class="title">Left Menu</h1>
          </ion-header-bar>
          <ion-content>
          <ul class="list">
              <a href="#/menu/tabs" class="item" menu-close>Tabs</a>
              <a href="#/menu/home" class="item" menu-close>About</a>
            </ul>

          </ion-content>
        </ion-side-menu>

    <!-- <ion-side-menu side="right">
          <ion-header-bar class="bar-assertive">
            <h1 class="title">Right menu</h1>
          </ion-header-bar>
          <ion-content>

          <ul class="list" ng-controller ="AppCtrl">
              <a href="#" class="button" ng-click="popover.show($event)" menu-close>POPOVER</a>
              <a href="#/menu/home" class="item" menu-close>About</a>
            </ul>


          </ion-content>


        </ion-side-menu>-->


      </ion-side-menus>

tabs.html 看起来像这样：

<ion-tabs class="tabs-icon-top tabs-positive">

        <ion-tab title="Home" icon="ion-home" href="#/tab/home">
          <ion-nav-view name="home-tab"></ion-nav-view>
        </ion-tab>

        <ion-tab title="About" icon="ion-help-circled" href="#/menu/about">
          <ion-nav-view name="About"></ion-nav-view>
        </ion-tab>

        <ion-tab title="Contact" icon="ion-arrow-expand" href="#/menu/contact">
          <ion-nav-view name="contact-tab"></ion-nav-view>
        </ion-tab>

      </ion-tabs>

我定义状态的app.js如下：

 $stateProvider
      .state('menu', {
        url: "/menu",
        abstract: true,
        templateUrl: "templates/menu.html",
        controller: 'AppCtrl'
      })
      .state('menu.home', {
        url: "/home",
        views: {
          'menuContent': {
            templateUrl: "templates/home.html",

          }
        }
      })

      .state('menu.tabs', {
        url: "/tabs",
        views: {
          'menuContent': {
            templateUrl: "templates/tabs.html"
          }
        }
      })

现在，我能否大致了解一下它是如何在一个视图中显示 menu.html 中的导航栏以及 tabs.html 中的选项卡的？

【问题讨论】：

你找到了吗？我有同样的问题帮助。请分享你的发现谢谢

标签： angularjs ionic-framework angular-ui-router ionic

【解决方案1】：

在您的 index.html 文件中，您会找到一个 ion-nav-view 标记。

<ion-nav-view></ion-nav-view>

这是显示您的抽象“菜单”状态及其控制器和 menu.html 模板。

在您的 menu.html 模板中，还有另一个 ion-nav-view 标记，但这次多了一个 name-attribute。

<ion-nav-view name="menuContent"></ion-nav-view>

menuContent 是您在 menu.html 中使用的 ui-view 的名称。这与 $stateProvider 中某些状态内的 view 属性匹配。

基本上这些是ui-router 的嵌套ui-view 指令在这里工作。我强烈建议您阅读文档，这将为您提供更好的解释。

【讨论】：