离子侧面菜单和选项卡嵌套的观点：选项卡嵌套视图内容不显示 [英] Ionic side menu and tabs with nested views: content of tab nested views not showing
问题描述
我是新来的这两个 AngularJS 的和的离子的。
I am new to both AngularJS and Ionic.
我创建一个既有的 sidemenu 的和的标签的里面的菜单的一个选项的应用程序。标签应使用嵌套视图渲染它的内容，所以没有纯 HTML 在这里。
I am creating an app that has both a sidemenu and tabs inside one of the menu's options. The tabs should render its content by using a nested view, so no plain HTML here.
我可以sidemenu选项和各项工作之间导航，并得到正确呈现。问题是当我进入托管选项卡中的菜单选项。
I can navigate between the sidemenu options and all works and gets rendered properly. The problem comes when I enter the menu option that hosts the tabs.
虽然标签导航面板中正常显示，我可以在标签之间导航，不知何故在创建选项卡的内容，但仍无形。如果我做了一个离子服务并检查生成的 HTML 与萤火虫或类似的，我可以看到生成的嵌套视图的内容。这只是我没有看到它在浏览器上。这发生在我身上均铬和火狐所以浏览器不应该成为问题。与的Android 模拟器尝试时也一样。
While the tabs navigation panel renders properly and I can navigate between the tabs, somehow the tab's content is created but remains invisible. If I do an ionic serve and inspect the generated HTML with Firebug or similar I can see the content of the nested view generated. It is just I do not see it on the browser. This happens to me in both Chromium and Firefox so browser should not be the problem. Same happens when trying with the Android emulator.
我首先想到的一个路由的问题，但是，这并不什么太大的意义对我来说，由于生成的内容（只是看不到）。
I first thought of a routing problem, but that does not make too much sense to me, since the content is generated (just invisible).
我创建了一个 Plunkr 与我的code降低到为了最小重现该问题。无论如何，我的（相关）code是如下：
I have created a Plunkr with my code reduced to the minimum in order to reproduce the problem. Anyway, my (relevant) code is as following:
的index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" name="viewport" />
<title></title>
<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/nightly/css/ionic.css">
<link href="app.css" rel="stylesheet">
<script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- 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="app.js"></script>
<script src="services.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>
app.js
angular.module('starter', ['ionic', 'starter.controllers'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "menu.html",
controller: 'AppCtrl'
})
.state('app.questionsAnswers', {
url: "/questionsAnswers",
// abstract: true,
views: {
'menuContent': {
templateUrl: "questionsAnswers.html"//,
// controller: 'questionsAnswersCtrl'
}
}
})
.state('app.questionsAnswers.recent', {
url: "/recent",
views: {
'recent-questions': {
templateUrl: "recentQuestionsAnswers.html",
controller: 'recentQuestionsAnswersCtrl'
}
}
})
.state('app.questionsAnswers.mostVoted', {
url: "/mostVoted",
views: {
'most-voted-questions': {
templateUrl: "mostVotedQuestionsAnswers.html",
controller: 'mostVotedQuestionsAnswersCtrl'
}
}
})
.state('app.questionsAnswers.random', {
url: "/random",
views: {
'random-questions': {
templateUrl: "randomQuestionsAnswers.html",
controller: 'randomQuestionsAnswersCtrl'
}
}
})
.state('app.foo', {
url: "/foo",
views: {
'menuContent': {
templateUrl: "foo.html",
controller: 'fooCtrl'
}
}
});
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/foo');
});
menu.html
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<ion-nav-bar class="bar-stable">
<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-bar>
<ion-nav-view name="menuContent"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-header-bar class="bar-stable">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content>
<ion-list>
<ion-item nav-clear menu-close href="#/app/questionsAnswers">
Questions & Answers
</ion-item>
<ion-item nav-clear menu-close href="#/app/foo">
Foo
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
questionsAnswers.html
<ion-view view-title="Questions & Answers">
<ion-content>
<h1>Questions & Answers</h1>
<ion-tabs class="tabs-positive tabs-icon-only">
<ion-tab title="Recent" ui-sref="app.questionsAnswers.recent" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
<ion-nav-view name="recent-questions"></ion-nav-view>
</ion-tab>
<ion-tab title="Most voted" ui-sref="app.questionsAnswers.mostVoted" icon-on="ion-arrow-up-c" icon-off="ion-arrow-up-a">
<ion-nav-view name="most-voted-questions"></ion-nav-view>
</ion-tab>
<ion-tab title="Random" ui-sref="app.questionsAnswers.random" icon-on="ion-help-circled" icon-off="ion-help">
<ion-nav-view name="random-questions"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-content>
</ion-view>
在 HTML 的文件在我的 SSCCE 其余的都是只是类型的普通观点：
The rest of the HTML files in my SSCCE are just plain views of the type:
<ion-view view-title="foo">
<ion-content>
<ion-list>
foo content
</ion-list>
</ion-content>
</ion-view>
的 controllers.js 是例子并不真正相关，因为所有的控制器基本上做（在真正的应用程序，他们都有自己的功能当然）什么都没有。
The controllers.js is not really relevant in the example since all controllers do basically nothing (of course in the real app they all have their own functionality).
我已经读了很多无论是在SO和其他网的问题和答案，但似乎无法找到任何我做错了。问题是：为什么在我的标签嵌套视图渲染，但仍看不到的
I have read a lot of questions and answers both in SO and other webs, but can not seem to find whatever I am doing wrong. Question is: why does the nested view in my tabs render but remain invisible?
推荐答案
您离子视图 问题与放大器;答案（ questionAnswers.html ）不能包含＆LT;离子含量＆GT; 元素的原因您已设置＆LT;离子含量方式＆gt; 每个子视图
Your ion-view Questions & Answers (questionAnswers.html) cannot contain a <ion-content> element cause you're already setting the <ion-content> in each sub-view.
EX：
<ion-view view-title="Most voted questions and answers">
<ion-content>
<h1>Most voted Questions</h1>
</ion-content>
</ion-view>
所以你的 questionAnswers.html 应该是：
<ion-view view-title="Questions & Answers">
<ion-tabs class="tabs-positive tabs-icon-only tabs-top">
<ion-tab title="Recent" ui-sref="app.questionsAnswers.recent" icon-on="ion-ios-clock" icon-off="ion-ios-clock-outline">
<ion-nav-view name="recent-questions">
</ion-nav-view>
</ion-tab>
<ion-tab title="Most voted" ui-sref="app.questionsAnswers.mostVoted" icon-on="ion-arrow-up-c" icon-off="ion-arrow-up-a">
<ion-nav-view name="most-voted-questions"></ion-nav-view>
</ion-tab>
<ion-tab title="Random" ui-sref="app.questionsAnswers.random" icon-on="ion-help-circled" icon-off="ion-help">
<ion-nav-view name="random-questions"></ion-nav-view>
</ion-tab>
</ion-tabs>
</ion-view>
这是 plunker 。
这篇关于离子侧面菜单和选项卡嵌套的观点：选项卡嵌套视图内容不显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
