Nabil Sham
Nabil Sham

Reputation: 2355

Recommend design for dynamic ionic side menu

My app has many states that falls under different categories and I need different side menus for each category.

/book/view
/book/edit
..
/dvd/buy
/dvd/view
..etc

I have 3 options:

1. Using different menus templates:

    $stateProvider                                     
        .state('dvd', {                                    
            url: '/dvd',                                   
            abstract: true,                                
            templateUrl: 'templates/dvd_menu.html',            
            controller: 'AppCtrl'                          
        })                                                 

         .state('book', {                                    
            url: '/book',                                   
            abstract: true,                                
            templateUrl: 'templates/book_menu.html',  
            controller: 'AppCtrl'                          
        })                                                 

Using this, I couldn't figure out to enable the back button to show if you switch from books to dvds.

2. Populating the menu dynamically:

    <ion-item 
             menu-close
             ng-click="$eval(item.click)"
             ng-repeat="item in customMenuItems track by $index">
        {{item.text}}
    </ion-item>

Is this solution recommended?

3. Putting all the items in the menu and switch them on and off using ng-show.

Is there any better solution I am missing, how would you do it?

Upvotes: 0

Views: 1064

Answers (1)

Nam Pham
Nam Pham

Reputation: 1224

It depends on your choice.

For me, creating a controller that can take categoryId and actionId as parameters.

  1. Register in app.js:

    $stateProvider                                     
    .state('category', {                                    
        url: '/category/:categoryId/:actionId',                              
        templateUrl: 'templates/category.html',            
        controller: 'CategoryCtrl'                          
    })
    
  2. Create a CategoryService to handle the items for each category, for example I had a getItems method that takes categoryId and actionId and return the list of items. Then inject it into the CategoryCtrl:

    myApp.controller('CategoryCtrl', ['$scope', '$stateParams', 'CategoryService', 
         function($scope, $stateParams, CategoryService){
             var categoryId = $stateParams.categoryId;
             var actionId = $stateParams.actionId;    
             $scope.customMenuItems = CategoryService.getItems(categoryId, actionId);
    });
    
  3. Bind customMenuItems to the templates/category.html view through $scope.

Upvotes: 2

Related Questions