问题
I am working on a project using Ionic framework. I want to get right menu on specific page (each right menu will have different content). I am not sure how to implement that.
回答1:
I am assuming that You want to have the sidemenu different while changing the view please see below sample:
HTML
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Ionic Template</title>
<link href="http://code.ionicframework.com/1.0.0-beta.4/css/ionic.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0-beta.4/js/ionic.bundle.js"></script>
</head>
<body >
<ion-nav-view></ion-nav-view>
<script id="app.html" type="text/ng-template">
<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-chevron-left"></i> Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view name="appContent" animation="slide-left-right"></ion-nav-view>
</ion-pane>
<ion-side-menu side="left">
<ion-nav-view name="menuList"></ion-nav-view>
</ion-side-menu>
</ion-side-menus>
</script>
<script id="browse.html" type="text/ng-template">
<ion-view title="Browse">
<ion-nav-buttons side="left">
<button menu-toggle="left"class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
<h1>Browse</h1>
</ion-content>
</ion-view>
</script>
<script id="menuBrowse.html" type="text/ng-template">
<header class="bar bar-header bar-stable">
<h1 class="title">First Menu</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close href="#/app/search">
Search
</ion-item>
<ion-item nav-clear menu-close href="#/app/playlists">
Second Menu
</ion-item>
</ion-list>
</ion-content>
</script>
<script id="menuPlaylists.html" type="text/ng-template">
<header class="bar bar-header bar-stable">
<h1 class="title">Second Menu</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close href="#/app/search">
Search
</ion-item>
<ion-item nav-clear menu-close href="#/app/browse">
Different Menu
</ion-item>
</ion-list>
</ion-content>
</script>
<script id="menuSearch.html" type="text/ng-template">
<header class="bar bar-header bar-stable">
<h1 class="title">Search Menu</h1>
</header>
<ion-content class="has-header">
<ion-list>
<ion-item nav-clear menu-close href="#/app/browse">
Browse
</ion-item>
<ion-item nav-clear menu-close href="#/app/playlists">
Playlists
</ion-item>
</ion-list>
</ion-content>
</script>
<script id="playlist.html" type="text/ng-template">
<ion-view title="Playlist">
<ion-content class="has-header">
<h1>Playlist</h1>
</ion-content>
</ion-view>
</script>
<script id="playlists.html" type="text/ng-template">
<ion-view title="Playlists">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
<ion-list>
<ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
{{playlist.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
</script>
<script id="search.html" type="text/ng-template">
<ion-view title="Search">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
<h1>Search</h1>
</ion-content>
</ion-view>
</script>
<script id="" type="text/ng-template">
</script>
<script id="" type="text/ng-template">
</script>
</body>
</html>
JS
angular.module('ionicApp', ['ionic'])
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: "/app",
abstract: true,
templateUrl: "app.html",
controller: 'AppCtrl'
})
.state('app.search', {
url: "/search",
views: {
'appContent' :{
templateUrl: "search.html"
},
'menuList': {
templateUrl : "menuSearch.html"
}
}
})
.state('app.browse', {
url: "/browse",
views: {
'appContent' :{
templateUrl: "browse.html"
},
'menuList': {
templateUrl : "menuBrowse.html"
}
}
})
.state('app.playlists', {
url: "/playlists",
views: {
'appContent' :{
templateUrl: "playlists.html",
controller: 'PlaylistsCtrl'
},
'menuList': {
templateUrl : "menuPlaylists.html",
controller: "PlaylistsCtrl"
}
}
})
.state('app.single', {
url: "/playlists/:playlistId",
views: {
'appContent' :{
templateUrl: "playlist.html",
controller: 'PlaylistCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/playlists');
})
.controller('AppCtrl', function($scope) {
})
.controller('PlaylistsCtrl', function($scope, $state) {
$scope.playlists = [
{ title: 'WebRuster', id: 1 },
{ title: 'WebRuster', id: 2 },
{ title: 'WebRuster', id: 3 },
{ title: 'WebRuster', id: 4 },
{ title: 'WebRuster', id: 5 },
{ title: 'WebRuster', id: 6 }
];
$scope.goTabs = function() {
console.log('Going to tabs!');
$state.go("app.tabs.home");
}
})
.controller('PlaylistCtrl', function($scope, $stateParams) {
})
Here is working CodePen
来源：https://stackoverflow.com/questions/35569051/ionic-how-to-show-different-menu-for-different-view