如何使用Ionic在一个URL中呈现多个视图

Question

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

我已经能够从互联网上获取这些确切的功能,并且点击并尝试.但是我仍然不确定在应用程序的同一页面上使用导航栏和选项卡这一点很重要.

我有一个名为的文件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的选项卡吗？

Answer 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是ui-view您在menu.html中使用的名称.这匹配了里面某些状态内的view属性$stateProvider.

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