javascript 离子侧菜单不出现
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24771696/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ionic side menu does not appear
提问by user3843276
So I'm trying to use ionic to build a simple mobile app. I've looked at ionic tutorials and googled quite a bit but I'm not quite getting it. I have created a nav bar that shows up on every page by adding this code to the index.html page:
所以我正在尝试使用 ionic 来构建一个简单的移动应用程序。我看过离子教程并在谷歌上搜索了很多，但我不太明白。我通过将此代码添加到 index.html 页面，创建了一个显示在每个页面上的导航栏：
<body ng-app="starter">
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-icon icon ion-ios7-arrow-back">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
</body>
I added a navicon to the right side of the nav bar on one of my pages with this code:
我使用以下代码在其中一个页面的导航栏右侧添加了一个导航图标：
<ion-view title="Hanzi Options">
<ion-nav-buttons side="right">
<button menu-toggle="right" class="button button-icon icon ion-navicon" >
</button>
</ion-nav-buttons>
<ion-content>...etc
I would like to be able to click on the navicon and see a side menu containing a basic html page called sidemenu.html that is located in the templates folder. Here is the start of the code in that file:
我希望能够单击 navicon 并看到一个侧边菜单，其中包含一个名为 sidemenu.html 的基本 html 页面，该页面位于模板文件夹中。这是该文件中代码的开头：
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-stable nav-title-slide-ios7">
<ion-nav-back-button class="button-clear"><i class="icon ion-ios7-arrow-back"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<header class="bar bar-header bar-stable">
<h1 class="title">Navigate</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close href="#/friends">
Friends
</ion-item>...etc
I added this code to my app.js file in the .config section:
我将此代码添加到我的 app.js 文件中的 .config 部分：
.state('app.sidemenu', {
url: "/sidemenu",
abstract: true,
templateUrl: "templates/sidemenu.html",
controller: 'NavCtrl'
})
and an empty NavCtrl to my controllers.js file:
和一个空的 NavCtrl 到我的controllers.js 文件：
.controller('NavCtrl', function($scope) {
});
I suspect that maybe my .state code isn't quite right but not sure. Also, do I need to add something to the NavCtrl controller to open/close the side menu? Many thanks in advance!
我怀疑我的 .state 代码可能不太正确但不确定。另外，我是否需要向 NavCtrl 控制器添加一些东西来打开/关闭侧边菜单？提前谢谢了！
回答by user3843276
Wow I finally worked this out after losing a day to skimpy documentation. The tutorials and examples on ionic framework website seem to be seriously outdated.
哇，我终于在浪费了一天的时间后解决了这个问题。离子框架网站上的教程和示例似乎已经严重过时了。
First, I created a factory to provide the list items for the side menu:
首先，我创建了一个工厂来为侧边菜单提供列表项：
.factory('MenuService', function() {
var menuItems = [{text: 'Friends'}, {text: 'Enemies'}, {text: 'Losers'}];
return {
all: function() {
return menuItems;
}
}
})
Then, I created a menu controller:
然后，我创建了一个菜单控制器：
.controller('MenuController', function ($scope, $location, MenuService) {
// "MenuService" is a service returning mock data (services.js)
$scope.list = MenuService.all();
});
I replaced the code in the body of the index.html page with this:
我用这个替换了 index.html 页面正文中的代码：
<div ng-controller="MenuController">
<ion-side-menus>
<!-- Center content -->
<ion-pane ion-side-menu-content>
<ion-nav-bar type="bar-assertive" back-button-type="button-icon" back-button-icon="ion-arrow-left-c"></ion-nav-bar>
<ion-nav-view>
</ion-nav-view>
</ion-pane>
<!-- Left Side Menu -->
<ion-side-menu side="right">
<ion-header-bar class="bar bar-header bar-assertive">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content has-header="true">
<ion-list>
<ion-item ng-click="goTo(item.link)" class="item item-icon-left" ng-repeat="item in list" menu-close>
<!-- <i ng-class="item.iconClass"></i> -->
{{item.text}}
</ion-item>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
</div>
The factory took the place of the sidemenus.html that I had in the template directory. Also, the ".state" stuff was not needed at all.
工厂取代了我在模板目录中的 sidemenus.html。此外，根本不需要“.state”的东西。
回答by akumapunk
There is a starter app for Ionic that is a small example for an app with a side menu
有一个用于 Ionic 的入门应用程序，它是带有侧边菜单的应用程序的一个小例子
ionic start myApp sidemenu
Here is a live preview that you can check out
这是您可以查看的实时预览
http://plnkr.co/edit/0RXSDB?p=preview
http://plnkr.co/edit/0RXSDB?p=preview
I think that you have a problem in your routes definitions
我认为您的路线定义有问题
Change this:
改变这个：
.state('app.sidemenu', { ...
Into this:
进入这个：
.state('sidemenu', { ...
And all your other routes to the different sections of the menu should be like this:
到菜单不同部分的所有其他路线应该是这样的：
.state('sidemenu.home', { ...
.state('sidemenu.dashboard', { ...
