如何在Ionic的不同视图中显示不同的菜单内容

Question

美好的一天！ 我是Ionic的新手，我希望你能帮助我。 我在创建项目时使用了离子启动myApp sidemenu。 如何在不同的用户视图中显示不同的菜单内容。 例如，我有2个不同的用户：学生和家长，然后我想在父视图中显示有限的菜单内容：

（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">&nbsp;&nbsp;&nbsp;HOME</div></a>
          <ion-item menu-close>
          <div class="sub">
            <a href="#/app/studhome" class="icon ion-clipboard">
              &nbsp;&nbsp;&nbsp;ANNOUNCEMENTS
            </a>
          </div>
          </ion-item>
          <ion-item menu-close>
          <div class="sub">
            <a href="#/app/events" class="icon ion-calendar">
              &nbsp;&nbsp;&nbsp;ACADEMIC CALENDAR
            </a>
          </div>
          </ion-item>
          <a href="#/app/viewgrades" menu-close><div class="menutitle ion-android-person">&nbsp;&nbsp;&nbsp;STUDENT INFORMATION</div></a>
          <ion-item menu-close>
          <div class="sub">
            <a href="#/app/viewgrades" class="icon ion-ios-folder">
              &nbsp;&nbsp;&nbsp;GRADES
            </a>
          </div>
          </ion-item>
          <ion-item menu-close>
          <div class="sub">
            <a href="#/app/ranking" class="icon ion-stats-bars">
              &nbsp;&nbsp;&nbsp;RANKING
            </a>
          </div>
          </ion-item>
          <ion-item menu-close>
          <div class="sub">
            <a href="#/app/viewschedules" class="icon ion-pin">
              &nbsp;&nbsp;&nbsp; SCHEDULES
            </a>
          </div>
          </ion-item>
          <a href="#/app/advising" menu-close><div class="menutitle ion-ios-compose">&nbsp;&nbsp;&nbsp;ADVISING</div></a>
          <ion-item menu-close>
          <div class="sub">
            <a href="#/app/advising" class="icon ion-chatbox-working">
              &nbsp;&nbsp;&nbsp;ADVISING NOTIFICATION
            </a>
          </div>
          </ion-item>
          <ion-item menu-close>
          <div class="sub">
            <a href="#/app/academicdelinquency" class="icon ion-sad">
              &nbsp;&nbsp;&nbsp;ACADEMIC DELINQUENCY
            </a>
          </div>
          </ion-item>
          <a href="#/app/curriculum" menu-close><div class="menutitle ion-ios-information">&nbsp;&nbsp;&nbsp;ACADEMIC INFORMATION</div></a>
          <ion-item menu-close>
          <div class="sub">
            <a href="#/app/curriculum" class="icon ion-ios-cog">
              &nbsp;&nbsp;&nbsp;CURRICULUM
            </a>
          </div>
          </ion-item>
          <ion-item menu-close>
          <div class="sub">
            <a href="#/app/subjectenrolled" class="icon ion-ios-checkmark">
              &nbsp;&nbsp;&nbsp;SUBJECT ENROLLED
            </a>
          </div>
          </ion-item>
          <a href="#/app/history" menu-close><div class="menutitle ion-ios-book">&nbsp;&nbsp;&nbsp;PDM INFORMATION</div></a>
          <ion-item menu-close>
          <div class="sub">
            <a href="#/app/history" class="icon ion-ios-lightbulb">
              &nbsp;&nbsp;&nbsp;HISTORY
            </a>
          </div>
          </ion-item>
          <ion-item menu-close>
          <div class="sub">
            <a href="#/app/officials" class="icon ion-ios-people">
              &nbsp;&nbsp;&nbsp;SCHOOL OFFICIALS
            </a>
          </div>
          </ion-item>
          <ion-item menu-close>
          <div class="sub">
            <a href="#/app/marilaohymn" class="icon ion-ios-musical-notes">
              &nbsp;&nbsp;&nbsp;MARILAO HYMN
            </a>
          </div>
          </ion-item>
          <a href="#/app/settings" menu-close><div class="menutitle ion-android-settings">&nbsp;&nbsp;&nbsp;SETTINGS</div></a>
          <ion-item menu-close>
          <div class="sub">
            <a href="#/app/settings" class="icon ion-gear-b">
              &nbsp;&nbsp;&nbsp;ACCOUNT SETTINGS
            </a>
          </div>
          </ion-item>
          <ion-item menu-close>
          <div class="sub">
            <a href="" class="icon ion-locked">
              &nbsp;&nbsp;&nbsp;LOGOUT
            </a>
          </div>
          </ion-item>
          </div>


          <!-- PARENT MENU -->
          <div ng-if="parentlist">
            <a href="#/app/studhome" menu-close><div class="menutitle ion-ios-home">&nbsp;&nbsp;&nbsp;HOME</div></a>
          <ion-item menu-close>
          <div class="sub">
            <a href="#/app/studhome" class="icon ion-clipboard">
              &nbsp;&nbsp;&nbsp;ANNOUNCEMENTS
            </a>
          </div>
          </ion-item>
          <ion-item menu-close>
          <div class="sub">
            <a href="#/app/events" class="icon ion-calendar">
              &nbsp;&nbsp;&nbsp;ACADEMIC CALENDAR
            </a>
          </div>
          </ion-item>
          <a href="#/app/viewgrades" menu-close><div class="menutitle ion-android-person">&nbsp;&nbsp;&nbsp;STUDENT INFORMATION</div></a>
          <ion-item menu-close>
          <div class="sub">
            <a href="#/app/viewgrades" class="icon ion-ios-folder">
              &nbsp;&nbsp;&nbsp;GRADES
            </a>
          </div>
          </ion-item>
          <ion-item menu-close>
          <div class="sub">
            <a href="#/app/ranking" class="icon ion-stats-bars">
              &nbsp;&nbsp;&nbsp;RANKING
            </a>
          </div>
          </ion-item>
          <ion-item menu-close>
          <div class="sub">
            <a href="#/app/viewschedules" class="icon ion-pin">
              &nbsp;&nbsp;&nbsp; SCHEDULES
            </a>
          </div>
          </ion-item>
          <a href="#/app/curriculum" menu-close><div class="menutitle ion-ios-information">&nbsp;&nbsp;&nbsp;ACADEMIC INFORMATION</div></a>
          <ion-item menu-close>
          <div class="sub">
            <a href="#/app/curriculum" class="icon ion-ios-cog">
              &nbsp;&nbsp;&nbsp;CURRICULUM
            </a>
          </div>
          </ion-item>
          <ion-item menu-close>
          <div class="sub">
            <a href="#/app/subjectenrolled" class="icon ion-ios-checkmark">
              &nbsp;&nbsp;&nbsp;SUBJECT ENROLLED
            </a>
          </div>
          </ion-item>
          <a href="#/app/history" menu-close><div class="menutitle ion-ios-book">&nbsp;&nbsp;&nbsp;PDM INFORMATION</div></a>
          <ion-item menu-close>
          <div class="sub">
            <a href="#/app/history" class="icon ion-ios-lightbulb">
              &nbsp;&nbsp;&nbsp;HISTORY
            </a>
          </div>
          </ion-item>
          <ion-item menu-close>
          <div class="sub">
            <a href="#/app/officials" class="icon ion-ios-people">
              &nbsp;&nbsp;&nbsp;SCHOOL OFFICIALS
            </a>
          </div>
          </ion-item>
          <ion-item menu-close>
          <div class="sub">
            <a href="#/app/marilaohymn" class="icon ion-ios-musical-notes">
              &nbsp;&nbsp;&nbsp;MARILAO HYMN
            </a>
          </div>
          </ion-item>
          <a href="#/app/settings" menu-close><div class="menutitle ion-android-settings">&nbsp;&nbsp;&nbsp;SETTINGS</div></a>
          <ion-item menu-close>
          <div class="sub">
            <a href="#/app/settings" class="icon ion-gear-b">
              &nbsp;&nbsp;&nbsp;ACCOUNT SETTINGS
            </a>
          </div>
          </ion-item>
          <ion-item menu-close>
          <div class="sub">
            <a href="" class="icon ion-locked">
              &nbsp;&nbsp;&nbsp;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);

}; 
})

我们将非常感谢您的帮助。 谢谢。

Answer 1

当人们以“学生”或“父母”身份登录时，您可以实施工厂来全局设置用户状态：

factory('userStateFactory', function(){
var myState ='';
return {
 setUserState : function(state) { myState = state },
 getUserState : function()      {return myState}
}
})

然后只需将其添加到您的登录控制器并分别进行设置。然后在菜单控制器中，只需将ng-if表达式添加到列表项。例如：

<ion-item menu-close ng-if="{userStateFactory.getUserState() == 'student'}">
      <div class="sub">
        <a href="#/app/viewschedules" class="icon ion-pin">
          &nbsp;&nbsp;&nbsp; SCHEDULES
        </a>
      </div>
      </ion-item>

您可以使用这些或类似的东西来实现您在Ionic中寻找的东西。可能你还需要在登录屏幕之后触发$ apply（），因为afaik Ionic在观看周期未处于活动状态时断开观看周期，例如在平板电脑上，侧面菜单总是可以在侧面看到，有没有明确的方式，他们将再次成为活跃的国家。因此，如果您希望更改显示，只需使用$ apply即可触发$ digest。