how to dynamically set templateUrl in ionic tabs? - angularjs

Question

Is it possible to pass a templateUrl parameter to the .state tab definitions similar to the following? I have multiple different pages to write and don't want a bunch of nested ng-ifs within a single template to parse out which "html" page to show:
.state('tab.menu', {
url: '/menu',
views: {
'tab-menu': {
templateUrl: 'templates/tab-menu.html',
controller: 'MenuCtrl'
}
}
})
.state('tab.menu-detail', {
url: '/menus/:menuID',
views: {
'tab-menu': {
templateUrl: function($stateParams,Menus) {
console.log("In function") ;
console.log("Template: " + Menus.get($stateParams.menuID).url) ;
return 'templates/' + Menus.get($stateParams.menuID).url ;
},
controller: 'MenuSubCtrl'
}
}
})
// controllers
.controller('MenuCtrl', function($scope,Menus) {
$scope.menus = Menus.all() ;
})
.controller('MenuSubCtrl', function($scope,$stateParams,Menus) {
$scope.menu = Menus.get($stateParams.menuID);
})
// services
.factory('Menus', function() {
var menus = [
{name:"Account",url:"menu-account.html",menuID:0},
{name:"Contact",url:"menu-contact.html",menuID:1},
{name:"Help",url:"menu-help.html",menuID:2},
{name:"Privacy",url:"menu-privacy.html",menuID:3},
{name:"Rate App",url:"menu-rate.html",menuID:4},
{name:"Report Bugs",url:"menu-bugs.html",menuID:5},
{name:"Settings",url:"menu-settings.html",menuID:6}
] ;
return {
all: function() {
return menus ;
},
get: function(menu) {
for (var i = 0; i < menus.length; i++) {
if (menus[i].menuID === parseInt(menuID)) {
return menus[i];
}
}
return null;
},
} ;
}) ;
In the above .state('tab.menu-detail'..., the templuateUrl function fires and the first console log entry works, the 2nd one does nothing, no message, no error...nothing. It just stops. I have tried multiple iterations to get this to work and am at a complete loss. When I click the above Tab page link (which is supposed to take you to a sub-custom view) it does nothing. No console message, no error...nothing.

Answer 1

You can assign function to template Url. I have faced the similar scenario following solution worked fine.
check this:
link