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 - 属性。

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

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

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

如何使用Ionic

1 个答案: