How to dynamically pass parameter to ionic tabs templateUrl?

ionic-v1
1

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');

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);
})
2

I have tried:

templateUrl: function($stateParams) {
   return 'templates/' + $stateParams.url ;
}

The above returns this error:

ionic.bundle.js:18526 GET file:///android_asset/www/templates/undefined net::ERR_FILE_NOT_FOUND

And from this link (Dynamic template from url) tried:

        templateUrl: ['$stateParams',function($stateParams) {
          console.log("Menu :"+$stateParams.url) ;
          return 'templates/'+ $stateParams.url ;
        }],

When I click the sub link on the tab, I get this error:
ionic.bundle.js:18526 GET file:///android_asset/www/$stateParams,function%20($stateParams)%20%7B%20%2…templates/'%20+$stateParams.url%20;%20%20%20%20%20%20%20%20%20%20%20%20%7D

Neither works. I know I am close but can’t see what I am doing wrong. Please help, driving me nuts over here.

When I click on the TAB Menu sub ion-item, its supposed to take me to a unique ‘account.html’ or ‘contact.html’ page - but instead it takes me back to the /tab/main because of the $urlRouterProvider.otherwise(‘/tab/main’) ;

3

U never defined $stateParams.url…

.state('tab.menu-detail', {
  url: '/menus/:menuID',  
  views: {
      'tab-menu': {
        templateUrl: function($stateParams, Menus) {
           return 'templates/' + Menus.get($stateParams.menuID).url ;
        }
        controller: 'MenuSubCtrl'
      }
    }
 })
4

I implemented your above code and it did not work. In fact, clicking any of the links (6 of them) did nothing…as in nothing happened, not even a console error message or console.log message. I tried both “Menus” (the factory name)…and I tried “menus” (captured in the .controller with $scope.menus = …).

.state('tab.menu-detail', {
  url: '/menus/:menuID',
  views: {
      'tab-menu': {
        templateUrl: function($stateParams,menus) {
          console.log("Template: " + menus.get($stateParams.menuID).url) ;
          return 'templates/' + menus.get($stateParams.menuID).url ;
        },
        controller: 'MenuSubCtrl'
      }
    }
})

I also tried menu.get($stateParams.menuID).url - as that is defined in the “MenuSubCtrl” controller. Still no go.

If I just do a simple console.log(“Template”) ; that fires…so I know the function is firing and getting inside. But changing the console.log message to: console.log("Template " + Menus.get($stateParams.menuID).url)) does not trigger…its like the second part is preventing even “Template” from being written…yet no error is appearing in the console.

It doesn’t understand Menus…or Menus.get…or Menus.get($stateParams) or Menus.get($stateParams.menuID).url - or some combination. But whats weird is that its not triggering an error or even an ‘undefined’ console message.

5

@Jiffer - your solution did not work for me. Some aspect of “Menus.get($StateParams.menuID).url” is not working - i believe its $StateParams. But I am not getting ANY error or console message of any kind so I am not able to see what the issue is.

In the meantime, I have statically defined all the urls/templateUrls in each of their own .state()'s just so I could move forward with other programming.