我正在使用ionic来构建一个简单的应用程序，它包含[index.html]，[home.html]，[about.html]，[cal.html - has additional and subtraction.html]
应用程序导航非常好。期待嵌套视图，当我点击加法或减法时，就会发生错误！
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
var app=angular.module('starter', ['ionic']);
app.run(function ($ionicPlatform) {
$ionicPlatform.ready(function () {
if (cordova.platformId === "ios" && window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
});
app.config(function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: "/home",
templateUrl: "templates/home.html"
})
.state('about', {
url: "/about",
templateUrl: "templates/about.html"
})
.state('calc', {
url: "/calc",
templateUrl: "templates/calc.html"
})
.state('calc.addition', {
url: "/addition",
templateUrl: "templates/addition.html"
})
.state('calc.subtraction', {
url: "/subtraction",
templateUrl: "templates/subtraction.html"
})
$urlRouterProvider.otherwise("/home");
})<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!--For users deploying their apps to Windows 8.1 or Android Gingerbread, platformOverrided.js
will inject platform-specific code from the /merges folder -->
<script src="js/platformOverrides.js"></script>
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</ion-content>
</ion-pane>
</body>
</html>
Calculate.html
<ion-view view-title="Calculator"> <!-- view-title to show the name of the page in the bar -->
<ion-content class="padding">
<p>
This is Calculator page
</p>
<a ui-sref ="calc.subtraction"> Addition</a>
<a ui-sref="calc.subtraction"> Subtraction</a>
</ion-content>
</ion-view>
addtion.html
<ion-view view-title="Addition">
<ion-content class="padding">
<p>
This is Addition page
</p>
</ion-content>
</ion-view>
subtraction.html
<ion-view view-title="Subtraction">
<ion-content class="padding">
<p>
This is Substraction page
</p>
</ion-content>
</ion-view>
答案 0 :(得分：1)
有几个要考虑的因素：
您不能将离子导航视图和离子导航条从索引放在离子窗格，离子内容等中。它们被设计为身体标记的子项。
var express = require('express');
var router = express.Router();
var request = require('request');
/* GET home page. */
router.get("/", (req, res) => {
res.render('index');
});
router.post("/", (req, res) => {
res.send(req.body)
})
module.exports = router;
删除后，您可以使用ion-nav-bar中的标题和每个视图上的子标题来保留双标题。
最后，对于路由，您必须选择：
在此CodePen中，您可以看到减法链接使用第一个选项，而添加链接使用第二个选项。
答案 1 :(得分：0)
您需要更新calc.html的视图，为UI-Router添加一个元素，用于显示嵌套内容，如下所示：
<ion-view view-title="Calculator" id="calcView">
<ion-content class="padding">
<p>This is Calculator page</p>
<a ui-sref="calc.subtraction">Addition</a>
<a ui-sref="calc.subtraction">Subtraction</a>
<!-- view container for addition/subtraction pages -->
<div ui-view></div>
</ion-content>
此时，你应该看到减法＆amp;的内容。添加页面，但有一个问题：计算器（父）视图中的内容不再可见。要解决这个问题，您需要指定一些CSS来正确定位事物，如下所示：
<!-- this goes in the <head> element -->
<style>
#calcView > .scroll-content > .scroll {
/* this forces the .scroll container to full-height, which
allows the nested content to be visible */
position: relative;
height: 100%;
}
#calcView [ui-view] .pane {
/* this offsets the top of the addition/subtraction view, to push it downwards,
below the content/links that are in the calc.html template. You'll need to
manually calculate/adjust this value as you develop your app's design. */
top: 60px;
}
</style>
有多种方法可以实现嵌套视图，包括命名它们（允许您在一个窗格中嵌套多个单独的视图）等等。文档有点深，但它们是准确的：https://github.com/angular-ui/ui-router/wiki/Nested-States-&-Nested-Views#nested-states--views。我从Github / Gist的例子中学到了很多东西，所以我绝对建议你也按照这些方式进行搜索。
*编辑：@Hiraqui is absolutely correct关于我忘记在回答中添加的内容：我必须转移<ion-nav-view＆gt; <ion-content>元素之外的元素，因此您的<body>元素现在看起来像这样：
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<ion-nav-bar class="bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
</ion-content>
<ion-nav-view></ion-nav-view>
</ion-pane>
</body>