How to dynamically pass parameter to ionic tabs templateUrl?

@rolinger wrote:

I am trying 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. I can't figure out how to get the selected "menu.url" into the .state to get the URL for the template.

  .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': {
            // i have added the following based on github docs; still doesn't work
            // I also passed "menu" and called ... + menu.url ; - doesn't work either.
            templateUrl: function($stateParams) {
               return 'templates/' + $stateParams.url ;
            }
            controller: 'MenuSubCtrl'
          }
        }
    })
    $urlRouterProvider.otherwise('/tab/main');

https://github.com/angular-ui/ui-router/wiki#templates

I have also tried: templateUrl: 'templates/'+menu.url, and a few others but I can't seem to find away to pass the specific url to the .state. The 'menus' is defined and passed back from the services.js factory:

.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;
    },
  } ;
}) ;

And my two controllers are:

.controller('MenuCtrl', function($scope,Menus) {
    $scope.menus = Menus.all() ;
})

.controller('MenuSubCtrl', function($scope,$stateParams,Menus) {
  $scope.menu = Menus.get($stateParams.menuID);
})

Posts: 4

Participants: 2

Read full topic