javascript - 带有嵌套 ionic 导航 View 的 ionic 导航 View 不起作用-6ren

javascript - 带有嵌套 ionic 导航 View 的 ionic 导航 View 不起作用

转载作者：可可西里更新时间：2023-11-01 14:45:29

25

4

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

以下是代码片段

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？它不能与 ionic View 一起使用吗？

最佳答案

尝试更改代码:

.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

关于javascript - 带有嵌套 ionic 导航 View 的 ionic 导航 View 不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31002619/

25

4

0

文章推荐： hadoop - 为什么分区连接(随机播放)并不总是比广播连接好？

文章推荐： java - 与 Accumulo 的连接仅在初始化时挂起

文章推荐： windows - 如何找出在Windows中打开的EXE

实例分析Try {} Catch{} 作用
今天有小伙伴给我留言问到，try{...}catch(){...}是什么意思？它用来干什么？简单的说他们是用来捕获异常的下面我们通过一个例子来详细讲解下
html - 列表社交媒体链接的 ARIA 作用
我正在努力提高网站的可访问性，但我不知道如何在页脚中标记社交媒体链接列表。这些链接指向我在 facecook、twitter 等上的帐户。我不想用 role="navigation" 标记这些链接，因
java.util.Timer SystemTime 作用？
说现在是 6 点，我有一个 Timer 并在 10 点安排了一个 TimerTask。之后，System DateTime 被其他服务(例如 ntp)调整为 9 点钟。我仍然希望我的 TimerTas
php - 什么是 Doctrine hydration 作用？
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
python入门:argparse浅析 nargs='+'作用
我就废话不多说了，大家还是直接看代码吧~ ? 1
Maven是什么?Maven的概念+作用+仓库的介绍+常用命令的详解
Maven系列1 1.什么是Maven？ Maven是一个项目管理工具，它包含了一个对象模型。一组标准集合，一个依赖管理系统。和用来运行定义在生命周期阶段中插件目标和逻辑。核心功能 Mav

首页

博学

6Ren·AI

商城

javascript - 带有嵌套 ionic 导航 View 的 ionic 导航 View 不起作用