Reputation: 2355
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
Reputation: 1224
It depends on your choice.
For me, creating a controller that can take categoryId
and actionId
as parameters.
Register in app.js
:
$stateProvider
.state('category', {
url: '/category/:categoryId/:actionId',
templateUrl: 'templates/category.html',
controller: 'CategoryCtrl'
})
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);
});
Bind customMenuItems
to the templates/category.html
view through $scope.
Upvotes: 2