0
美好的一天！ 我是Ionic的新人，我希望你能帮助我。 我使用离子启动myApp sidemenu创建项目。 如何在不同的用户视图中显示不同的菜单内容。 例如我有2个不同的用户：学生和父，然后我想显示在父视图有限的菜单内容：如何在Ionic的不同视图中显示不同的菜单内容
（menu.html）
<link rel="stylesheet" type="text/css" href="ionicons.css">
<ion-side-menus enable-menu-with-back-views="false">
<ion-side-menu-content drag-content="false">
<ion-nav-bar class="bar-energized">
<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-energized">
</ion-header-bar>
<ion-content>
<ion-list>
<!-- <h2>{{userInfo.username}}</h2> -->
<input name="student" type="checkbox" ng-model="studlist">
<input name="parent" type="checkbox" ng-model="parentlist">
<!-- STUDENT MENU -->
<div ng-if="studlist">
<a href="#/app/studhome" menu-close><div class="menutitle ion-ios-home"> HOME</div></a>
<ion-item menu-close>
<div class="sub">
<a href="#/app/studhome" class="icon ion-clipboard">
ANNOUNCEMENTS
</a>
</div>
</ion-item>
<ion-item menu-close>
<div class="sub">
<a href="#/app/events" class="icon ion-calendar">
ACADEMIC CALENDAR
</a>
</div>
</ion-item>
<a href="#/app/viewgrades" menu-close><div class="menutitle ion-android-person"> STUDENT INFORMATION</div></a>
<ion-item menu-close>
<div class="sub">
<a href="#/app/viewgrades" class="icon ion-ios-folder">
GRADES
</a>
</div>
</ion-item>
<ion-item menu-close>
<div class="sub">
<a href="#/app/ranking" class="icon ion-stats-bars">
RANKING
</a>
</div>
</ion-item>
<ion-item menu-close>
<div class="sub">
<a href="#/app/viewschedules" class="icon ion-pin">
SCHEDULES
</a>
</div>
</ion-item>
<a href="#/app/advising" menu-close><div class="menutitle ion-ios-compose"> ADVISING</div></a>
<ion-item menu-close>
<div class="sub">
<a href="#/app/advising" class="icon ion-chatbox-working">
ADVISING NOTIFICATION
</a>
</div>
</ion-item>
<ion-item menu-close>
<div class="sub">
<a href="#/app/academicdelinquency" class="icon ion-sad">
ACADEMIC DELINQUENCY
</a>
</div>
</ion-item>
<a href="#/app/curriculum" menu-close><div class="menutitle ion-ios-information"> ACADEMIC INFORMATION</div></a>
<ion-item menu-close>
<div class="sub">
<a href="#/app/curriculum" class="icon ion-ios-cog">
CURRICULUM
</a>
</div>
</ion-item>
<ion-item menu-close>
<div class="sub">
<a href="#/app/subjectenrolled" class="icon ion-ios-checkmark">
SUBJECT ENROLLED
</a>
</div>
</ion-item>
<a href="#/app/history" menu-close><div class="menutitle ion-ios-book"> PDM INFORMATION</div></a>
<ion-item menu-close>
<div class="sub">
<a href="#/app/history" class="icon ion-ios-lightbulb">
HISTORY
</a>
</div>
</ion-item>
<ion-item menu-close>
<div class="sub">
<a href="#/app/officials" class="icon ion-ios-people">
SCHOOL OFFICIALS
</a>
</div>
</ion-item>
<ion-item menu-close>
<div class="sub">
<a href="#/app/marilaohymn" class="icon ion-ios-musical-notes">
MARILAO HYMN
</a>
</div>
</ion-item>
<a href="#/app/settings" menu-close><div class="menutitle ion-android-settings"> SETTINGS</div></a>
<ion-item menu-close>
<div class="sub">
<a href="#/app/settings" class="icon ion-gear-b">
ACCOUNT SETTINGS
</a>
</div>
</ion-item>
<ion-item menu-close>
<div class="sub">
<a href="" class="icon ion-locked">
LOGOUT
</a>
</div>
</ion-item>
</div>
<!-- PARENT MENU -->
<div ng-if="parentlist">
<a href="#/app/studhome" menu-close><div class="menutitle ion-ios-home"> HOME</div></a>
<ion-item menu-close>
<div class="sub">
<a href="#/app/studhome" class="icon ion-clipboard">
ANNOUNCEMENTS
</a>
</div>
</ion-item>
<ion-item menu-close>
<div class="sub">
<a href="#/app/events" class="icon ion-calendar">
ACADEMIC CALENDAR
</a>
</div>
</ion-item>
<a href="#/app/viewgrades" menu-close><div class="menutitle ion-android-person"> STUDENT INFORMATION</div></a>
<ion-item menu-close>
<div class="sub">
<a href="#/app/viewgrades" class="icon ion-ios-folder">
GRADES
</a>
</div>
</ion-item>
<ion-item menu-close>
<div class="sub">
<a href="#/app/ranking" class="icon ion-stats-bars">
RANKING
</a>
</div>
</ion-item>
<ion-item menu-close>
<div class="sub">
<a href="#/app/viewschedules" class="icon ion-pin">
SCHEDULES
</a>
</div>
</ion-item>
<a href="#/app/curriculum" menu-close><div class="menutitle ion-ios-information"> ACADEMIC INFORMATION</div></a>
<ion-item menu-close>
<div class="sub">
<a href="#/app/curriculum" class="icon ion-ios-cog">
CURRICULUM
</a>
</div>
</ion-item>
<ion-item menu-close>
<div class="sub">
<a href="#/app/subjectenrolled" class="icon ion-ios-checkmark">
SUBJECT ENROLLED
</a>
</div>
</ion-item>
<a href="#/app/history" menu-close><div class="menutitle ion-ios-book"> PDM INFORMATION</div></a>
<ion-item menu-close>
<div class="sub">
<a href="#/app/history" class="icon ion-ios-lightbulb">
HISTORY
</a>
</div>
</ion-item>
<ion-item menu-close>
<div class="sub">
<a href="#/app/officials" class="icon ion-ios-people">
SCHOOL OFFICIALS
</a>
</div>
</ion-item>
<ion-item menu-close>
<div class="sub">
<a href="#/app/marilaohymn" class="icon ion-ios-musical-notes">
MARILAO HYMN
</a>
</div>
</ion-item>
<a href="#/app/settings" menu-close><div class="menutitle ion-android-settings"> SETTINGS</div></a>
<ion-item menu-close>
<div class="sub">
<a href="#/app/settings" class="icon ion-gear-b">
ACCOUNT SETTINGS
</a>
</div>
</ion-item>
<ion-item menu-close>
<div class="sub">
<a href="" class="icon ion-locked">
LOGOUT
</a>
</div>
</ion-item>
</div>
</ion-list>
</ion-content>
</ion-side-menu>
</ion-side-menus>
（app.js）
// Ionic Starter App
// angular.module is a global place for creating, registering and retrieving Angular modules
// 'starter' is the name of this angular module example (also set in a <body> attribute in index.html)
// the 2nd parameter is an array of 'requires'
// 'starter.controllers' is found in controllers.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);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/menu.html',
controller: 'AppCtrl'
})
.state('app.login', {
url: '/login',
views: {
'menuContent': {
templateUrl: 'templates/login.html',
controller: 'LoginCtrl'
}
}
})
.state('app.loginparent', {
url: '/loginparent',
views: {
'menuContent': {
templateUrl: 'templates/loginparent.html',
controller: 'LoginParentCtrl'
}
}
})
.state('app.loginstud', {
url: '/loginstud',
views: {
'menuContent': {
templateUrl: 'templates/loginstud.html',
controller: 'LoginStudCtrl'
}
}
})
.state('app.studhome', {
url: '/studhome',
views: {
'menuContent': {
templateUrl: 'templates/studhome.html',
controller: 'StudHomeCtrl'
}
}
})
.state('app.parenthome', {
url: '/parenthome',
views: {
'menuContent': {
templateUrl: 'templates/parenthome.html',
controller: 'ParentHomeCtrl'
}
}
})
.state('app.curriculum', {
url: '/curriculum',
views: {
'menuContent': {
templateUrl: 'templates/curriculum.html',
controller: 'CurriculumCtrl'
}
}
})
.state('app.subjectenrolled', {
url: '/subjectenrolled',
views: {
'menuContent': {
templateUrl: 'templates/subjectenrolled.html',
controller: 'SubjectEnrolledCtrl'
}
}
})
.state('app.ranking', {
url: '/ranking',
views: {
'menuContent': {
templateUrl: 'templates/ranking.html',
controller: 'RankingCtrl'
}
}
})
.state('app.viewgrades', {
url: '/viewgrades',
views: {
'menuContent': {
templateUrl: 'templates/viewgrades.html',
controller: 'ViewGradesCtrl'
}
}
})
.state('app.viewschedules', {
url: '/viewschedules',
views: {
'menuContent': {
templateUrl: 'templates/viewschedules.html',
controller: 'ViewSchedulesCtrl'
}
}
})
.state('app.advising', {
url: '/advising',
views: {
'menuContent': {
templateUrl: 'templates/advising.html',
controller: 'AdvisingCtrl'
}
}
})
.state('app.academicdelinquency', {
url: '/academicdelinquency',
views: {
'menuContent': {
templateUrl: 'templates/academicdelinquency.html',
controller: 'AcademicDelinquencyCtrl'
}
}
})
.state('app.events', {
url: '/events',
views: {
'menuContent': {
templateUrl: 'templates/events.html',
controller: 'EventsCtrl'
}
}
})
.state('app.officials', {
url: '/officials',
views: {
'menuContent': {
templateUrl: 'templates/officials.html',
controller: 'OfficialsCtrl'
}
}
})
.state('app.history', {
url: '/history',
views: {
'menuContent': {
templateUrl: 'templates/history.html',
controller: 'HistoryCtrl'
}
}
})
.state('app.marilaohymn', {
url: '/marilaohymn',
views: {
'menuContent': {
templateUrl: 'templates/marilaohymn.html',
controller: 'MarilaoHymnCtrl'
}
}
})
.state('app.settings', {
url: '/settings',
views: {
'menuContent': {
templateUrl: 'templates/settings.html',
controller: 'SettingsCtrl'
}
}
})
.state('app.logout', {
url: '/login',
views: {
'menuContent': {
templateUrl: 'templates/login.html',
controller: 'LogoutCtrl'
}
}
})
;
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/login');
});
（controllers.js）
angular.module('starter.controllers', [])
.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
// With the new view caching in Ionic, Controllers are only called
// when they are recreated or on app start, instead of every page change.
// To listen for when this page is active (for example, to refresh data),
// listen for the $ionicView.enter event:
//$scope.$on('$ionicView.enter', function(e) {
//});
// Form data for the login modal
$scope.loginData = {};
// Create the login modal that we will use later
$ionicModal.fromTemplateUrl('templates/login.html', {
scope: $scope
}).then(function(modal) {
$scope.modal = modal;
});
// Triggered in the login modal to close it
$scope.closeLogin = function() {
$scope.modal.hide();
};
// Open the login modal
$scope.login = function() {
$scope.modal.show();
};
// Perform the login action when the user submits the login form
$scope.doLogin = function() {
console.log('Doing login', $scope.loginData);
// Simulate a login delay. Remove this and replace with your login
// code if using a login system
$timeout(function() {
$scope.closeLogin();
}, 1000);
};
})
.controller('LoginCtrl', function($scope) {
// $scope.clickMe = function(){
// alert(0);
// }
// $scope.name1 = "hello";
})
.controller('LoginParentCtrl', function($scope) {
})
.controller('LoginStudCtrl', function($scope,$state,$rootScope,$http,$ionicLoading,$ionicModal) {
$scope.studentnumber = "";
$scope.username = "";
$scope.password = "";
$scope.login = function (studentnumber,username,password) {
//$cookies.put('studentnumber',username);
//-----------LOGIN---------------------
$ionicLoading.show({
template: 'Loading...'
}).then(function(){
console.log("The loading indicator is now displayed");
});
// ----------------------------------------
// SELECT DATA
$http.get('http://www.gvasample.esy.es/PDM-GVA%20ADMIN_2/getdata.php?id='+studentnumber).then(function (data){
if(studentnumber == data.data.id && username == data.data.username){
$rootScope.userInfo = data.data;
$ionicLoading.hide();
$state.go('app.studhome');
}
else{
$ionicLoading.hide();
alert("error");
}
});
/* MODAL
$ionicModal.fromTemplateUrl('my-modal.html', {
scope: $scope,
animation: 'slide-in-up'
}).then(function(modal) {
$scope.modal = modal;
});
---------------
*/
/* INSERT
$http.get('http://localhost/grade/insertdata.php?id='+studentnumber+'&name='+username).then(function (data){
alert("data save successfully!");
});
*/
}
})
.controller('StudHomeCtrl', function($scope,$rootScope) {
$scope.userInfo = $rootScope.userInfo;
angular.module('demo', ['ngIdle'])
// omitted for brevity
.config(function(IdleProvider, KeepaliveProvider) {
IdleProvider.idle(1*60); // 10 minutes idle
IdleProvider.timeout(30); // after 30 seconds idle, time the user out
KeepaliveProvider.interval(5*60); // 5 minute keep-alive ping
})
.run(function($rootScope) {
$rootScope.$on('IdleTimeout', function() {
// end their session and redirect to login
});
});
})
.controller('ParentHomeCtrl', function($scope) {
})
.controller('ViewGradesCtrl', function($scope) {
})
.controller('AdvisingCtrl', function($scope) {
})
.controller('CurriculumCtrl', function($scope) {
})
.controller('HistoryCtrl', function($scope) {
})
.controller('ViewSchedulesCtrl', function($scope) {
})
.controller('EventsCtrl', function($scope) {
})
.controller('OfficialsCtrl', function($scope) {
})
.controller('MarilaoHymnCtrl', function($scope) {
})
.controller('SettingsCtrl', function($scope) {
})
.controller('SubjectEnrolledCtrl', function($scope) {
})
.controller('RankingCtrl', function($scope) {
})
.controller('AcademicDelinquencyCtrl', function($scope) {
})
.controller('LogoutCtrl', function($scope) {
$scope.logout = function(){
$ionicLoading.show({template:'Logging out....'});
$localstorage.set('loggin_state', '');
$timeout(function() {
$ionicLoading.hide();
$ionicHistory.clearCache();
$ionicHistory.clearHistory();
$ionicHistory.nextViewOptions({ disableBack: true, historyRoot: true });
$state.go('login');
}, 30);
};
})
你的帮助将十分赞赏。 谢谢。
你的意思是这样的？ http://stackoverflow.com/questions/35569051/ionic-how-to-show-different-menu-for-different-view – Antonis
没有先生，因为我已经有一个现有的菜单。 我用离子启动myApp sidemenu。 我已经使用了该代码，并且遇到了一些问题，例如任何页面上都不会显示任何内容。 我认为这个代码是用来创建没有现成的菜单文件的。 感谢您的回应:) –