Recommend design for dynamic ionic side menu

Question

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?

Answer 1

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.