Dynamically change side menu content?

ionic-v1
1

Hello everyone,

I would like to change the side menu (ion-side-menu) content for specific views. Is there a standard way of doing so?
Let’s say I have a view where I would like to show specific side menu ion-items, that might be different from other view side menu items. Any thoughts?

Michael

2

Mey @mdundek, could yoi describe what sort of options you have?
There are many ways of doing it. Using a specific controller and then use ng-if is a way, but it depends the sort of options you would have.

3

Well, let’s take a very basic example. I want to use simple ion-list in side menu. So I thought I could simply use one way data binding to achieve this like this:

<ion-item ng-repeat="item in sidemenuItems" nav-clear menu-close on-tap="{{item.func}}">
          {{item.text}}
        </ion-item>

and then in my controller, change the sidemenuItems array on my scope element on $ionicView.enter event defined in each views specific controller. This does not seem to work for some reason:

$scope.$on("$ionicView.enter", function() {
		 $scope.sidemenuItems = [
		           {text: 'Home', func: 'goHome()'},
                   {text: 'Expenses', func: 'goToA()'},
                   {text: 'Time trackers', func: 'goToB()'}
		];
		 $scope.$digest();
	 });

I did create the array in my global controller beforehand like this:

$scope.sidemenuItems = [];

Any suggestions?

Thanks!

Michael

4

That’s also an approach, but depends on what you have on the menu.
I think the best idea is to create a directive and with this directive you add and remove the items in any controller.

5

Like the sound of this, unfortunately I am completely new to angular. I understand the basic concept of directives, but would not know how to create one that would do this for me. Any chance you or someone else could provide the basic structure of such a directive, so that it’s content can be changed from controllers? The content is secondary, I will tweak it to my need, only need to understand the wiring between template, directive and controllers. I know I ask for a lot, but it is so much faster to learn from exact examples…
Thanks :wink:
Michael

6

Well, that’s the reason I need you to describe the menus.
I think you could:

  1. Create the menu with a div inside. This div has a “ng-include” that will connect to $scope.menuTemplate.
  2. Create the directive that will handle this menuTemplate variable
  3. Create the templates outside.
7

I was pondering the same thing. I’m new to the framework. It’s rare that I stumble on a good solution.

The solution turns out to be REALLY easy.

(1) Define a controller that surrounds all other controllers index.html, perhaps called AppCtrl.

<body ng-app="MyApp">

      <div ng-controller="AppCtrl">
           <ion-nav-view></ion-nav-view>
      </div>

  </body>

(2) In AppCtrl create event handler to watch for view state transitions

angular.module('MyApp.AppControllers', [])

.controller('AppCtrl', [
      '$scope',
      '$state',
      '$rootScope',
      function($scope, $state, $rootScope) {

          // other code that might use $scope or $state
          // otherwise you can just have $rootState.
          
         // save current state in $rootScope
         // alternative: set $scope.currentState since
         // AppCtrl is a top level controller
         
         $scope.$on('$stateChangeSuccess', 
            function(evt, toState, toParams, fromState, fromParams) {                  
               $rootScope.currentState = toState.name;
            }
         );
         
      }
   ]
);

(3) In your side menu template do ng-show={{currentState == ‘state-name-here’}}. Then you can define multiple contents for the side menu!

... the other stuff ...

<ion-side-menu side="left">
   <ion-header-bar class="bar-stable">
         <h1 class="title">Left</h1>
   </ion-header-bar>

   <ion-content>

      <ion-list>
         
         <!-- perhaps items that appears in all menus -->
         <ion-item menu-close">
            <div class="row"><div class="col">Current state: {{currentState}}</div></div>
         </ion-item>
   
         <!-- side menu content for app.home-view -->
         <div ng-show="currentState == 'app.home-view'">
            
            <ion-item menu-close">
               <div class="row"><div class="col">Only in app.home-view</div></div>
            </ion-item>
            
            <!-- other menu items for app.home-view -->

         </div>

         <!-- side menu content for app.package-list -->
         
         <div ng-show="currentState == 'app.other-view'">

            <ionitem menu-close>
               <ion-item menu-close">
                  <div class="row"><div class="col">Only app.other-view</div></div>
               </ion-item>
            </ionitem>

            <!-- other menu items for app.other-view -->

         </div>
        
      </ion-list>
   </ion-content>