带有嵌套离子导航视图的离子导航视图不起作用答案

【问题标题】：ion-nav-view with nested ion-nav-view not working带有嵌套离子导航视图的离子导航视图不起作用
【发布时间】：2015-09-09 05:49:25
【问题描述】：

ion-nav-view 嵌套有一个奇怪的问题。当我在浏览器中加载应用程序时，我可以看到 URL 已更改为 /app/menu，但页面上没有出现来自 menu.html 的内容。页面是空白的。

下面是代码sn-p

index.html

<body ng-app="starter">
 <ion-nav-view></ion-nav-view>
</body>

app.js

.config(function ($stateProvider, $urlRouterProvider) {
  $stateProvider.
    state("app", {
    url: "/app",
    abstract: true,
    templateUrl: "templates/default.html",
    controller: "AdaptiveController"
  })
    .state("app.menu", {
    url: "/app/menu",
    views: {
      "page-content": {
        templateUrl: "templates/menu.html",
        controller: "MenuController"
      }
    }

  });

  $urlRouterProvider.otherwise("/app/menu");
})

default.html

<ion-view>
    <ion-content>
        <ion-nav-view name="page-content"></ion-nav-view>
    </ion-content>
</ion-view>

menu.html

<ion-view>
    <ion-header-bar class="bar bar-positive bar-header" align-title="center" no-tap-scroll="true">
        <div class="buttons buttons-left header-item">
            <span class="left-buttons"></span>
        </div>
        <div class="bar bar-header bar-positive header-item">Welcome</div>
        <div class="buttons buttons-right header-item">
            <span class="right-buttons"></span>
        </div>
    </ion-header-bar>
    <ion-content>
      <ion-list>
       <ion-item class="item item-icon-left">
         <i class="icon ion-person"/>   
         <h3>Profile</h3>
       </ion-item>
      </ion-list>
    </ion-content>
</ion-view>

如果我将default.html 中的代码更改为以下代码，则可以正常工作。

<ion-side-menus enable-menu-with-back-views="false">
  <ion-side-menu-content>
    <ion-nav-view name="page-content"></ion-nav-view>
  </ion-side-menu-content>
</ion-side-menus>

是否意味着 ion-nav-view 需要选项卡或 ion-side-menus？它不能与离子视图一起使用吗？

【问题讨论】：

标签： javascript html ionic-framework ionic hybrid-mobile-app

【解决方案1】：

尝试更改代码：

.state("app.menu", {
url: "/app/menu",
views: {
  "page-content": {
    templateUrl: "templates/menu.html",
    controller: "MenuController"
  }
}

到

.state("app.menu", {
url: "/menu",
views: {
  "page-content": {
    templateUrl: "templates/menu.html",
    controller: "MenuController"
  }
}

在 hrefs 中继续写 #/app/menu

【讨论】：