离子 - 仅在具体页面中显示侧面菜单 [英] Ionic - Showing side-menu ONLY in concrete pages
问题描述
我正在开发一个带有Ionic Framework的应用程序，我只想在一些具体视图中显示侧边菜单，但不是在每个视图中都显示。
I'm developing an App with Ionic Framework, and I only want to show a side-menu in some concrete views, but not in every view.
I '拥有 menu.html 文件：
<ion-side-menus>
<ion-pane ion-side-menu-content>
<ion-nav-bar class="bar-positive nav-title-slide-ios7">
</ion-nav-bar>
<ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<ion-content class="mymenu">
<div id="menu-list">
<ion-list class="list">
<ion-item item-type="item-icon-left" nav-clear menu-close href="#">
<i class="icon ion-home"></i><span>Menu Item</span>
</ion-item>
...
</ion-list>
</div>
</ion-content>
</ion-side-menu>
</ion-side-menus>
我的 index.html 的正文标记看起来完全像这样：
My index.html's body tag looks exactly like this:
<body ng-app="myApp">
<ion-nav-view></ion-nav-view>
</body>
我设置应用程序的 JavaScript 代码声明：
And the JavaScript code where I set up my App states:
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
.state('app.page1', {
url: "/page1",
views: {
'menuContent' :{
templateUrl: "templates/page1.html"
}
}
})
.state('app.page2', {
url: "/page2",
views: {
'menuContent' :{
templateUrl: "templates/page2.html"
}
}
})
// etc...
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/page1');
});
page1.html 和 page2.html 两者都包含以下结构：
page1.html and page2.html both contain the following structure:
<ion-view title="something">
<ion-content>
... // here comes the html content of the page
</ion-content>
</ion-view>
我实际上只能显示我的侧边菜单（ menu.html ） page1.html 而不是 page2.html ？有什么我想念的吗？
What can I actually do to only show my side-menu (menu.html) on page1.html and not on page2.html?? Is there anything I'm missing??
有没有办法只在我想要的那些网页上插入 menu.html 内容出现并忘记创建使用它的状态 templateUrl ？
Is there a way of inserting the menu.html content only on those pages I want it to appear and forgetting about creating the state that uses it as templateUrl?
推荐答案
您的所有页面都有侧边菜单的原因是因为您'app'表示其父级状态。激活状态后，其模板将自动插入其父状态模板的< ion-view> 中。如果它是顶级状态，因为它没有父状态，那么它的父模板是 index.html 。 app 状态包含侧边菜单。
The reason why your all your pages have side menu is because you 'app' state as their parent state. When a state is activated, its templates are automatically inserted into the <ion-view> of its parent state's template. If it's a top-level state, because it has no parent state then its parent template is index.html. The app state has the side menu in it.
您的代码应如下所示：
config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "templates/menu.html",
controller: 'AppCtrl'
})
//this state has the 'app' state (which has the sidemenu) as its parent state
.state('app.page1', {
url: "/page1",
views: {
'menuContent' :{
templateUrl: "templates/page1.html"
}
}
})
//this state has no parent, so it uses 'index.html' as its template. The index page has no
//sidemenu in it
.state('page2', {
url: "/page2",
templateUrl: "templates/page2.html"
}
})
///more code here
});
查看 https://github.com/angular-ui/ui-router/wiki
这篇关于离子 - 仅在具体页面中显示侧面菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
