我想尝试理解离子侧菜单，但我有很多问题因为文档很差 .
这是我的index.html（我尝试加载2个视图非内容）
<!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/ionicons.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">
-->
</head>
<body ng-app="ehc">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content>
<!-- barra in alto con pulsante mostra menu -->
<ion-nav-bar class="nav-title-slide-ios7 bar-positive">
<ion-nav-back-button>
</ion-nav-back-button>
<ion-nav-buttons class="button-balanced" side="left">
<button class="button button-icon ion-navicon" menu-toggle="left"></button>
</ion-nav-buttons>
</ion-nav-bar>
<!--<ion-nav-view name="menuContent" animation="slide-left-right"> </ion-nav-view>-->
<ion-nav-view name="a"></ion-nav-view>
<ion-nav-view name="b"></ion-nav-view>
</ion-side-menu-content>
<!--
=================================
menu nascosto
=================================
-->
<ion-side-menu side="left">
<header class="bar bar-header bar-dark">
<h1 class="title">Left menu voce</h1>
</header>
<ion-content has-header="true" overflow-scroll="true">
<ul class="list">
<a class="item item-icon-left gray"
href="#"
ng-click="toggleLeftMenu()"><i class="icon ion-home"></i>Cover
</a>
<a class="item item-icon-left gray"
href="#"
ng-click="toggleLeftMenu()"><i class="icon ion-help"></i>Get Help
</a>
<a class="item item-icon-left gray"
href="#"
ng-click="toggleLeftMenu()"><i class="icon ion-star"></i> Rate Us
</a>
<a class="item item-icon-left gray"
href="#"
ng-click="toggleLeftMenu()"><i class="icon ion-gear-a"></i>Settings
</a>
</ul>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</body>
</html>
<!-- remove in production -->
<script src="http://easyhomecosts.localhost:9000/livereload.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/ehcapp.js"></script>`
这是我的ehcapp.js角度模块
angular.module("ehc", ["ionic"])
.config(function ($urlRouterProvider,$stateProvider) {
$urlRouterProvider.otherwise('/a');
$stateProvider.state('stateA', {
url: '/a',
views: {
a: {
templateUrl: 'templates/a.html'
},
b:{
templateUrl: 'templates/b.html'
}
}
});
$stateProvider.state('stateB', {
url: '/b',
views: {
b: {
templateUrl: 'templates/b.html'
}
}
});
}) .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 && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleLightContent();
}
});
模板a.html e b.html内部只有100 A和100 B.
当我运行应用程序时，我只看到菜单和“BBBBBBBBBBBBBBB”（因为许多BBBBB隐藏回来“导航”
它可能会启动我的文本导航?????可以调用2次查看????
2 回答
首先，你在www文件夹中创建一个模板文件夹 . 这个文件夹添加a.html，b.html和menu.html.ion-side-menus标签范围从index.html中删除 .
Menu.html示例部分：
echapp.js是代码审查：
menu.html
echApp.js配置部分：
}