how to dynamically set templateUrl in ionic tabs?

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.

possible dupe of this? http://stackoverflow.com/questions/24727042/angularjs-ui-router-how-to-configure-dynamic-views — theaccordance, Jun 07 '16 at 18:04

score 1 · Answer 1 · edited May 23 '17 at 12:31

1

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

edited May 23 '17 at 12:31

Community

1
1

answered Jun 07 '16 at 18:05

Dinesh Sundaraneedi

402
1
5
18

thanks. I think that is what I am looking for. However, in that example 'urlattr' is being passed into the templateUrl function - where is that being defined at...or passed from? I substitued 'urlattr.name' with my 'menu.url' (defined in the factory) yet it comes back as 'undefined' in the rendered HTML. – rolinger Jun 07 '16 at 19:00
Its an anonymous function just returns what we are expecting. Make sure that the menu.url is available for that function. – Dinesh Sundaraneedi Jun 08 '16 at 02:24
i changed from menu.url to $stateParams.url - and its still not working. I even changed to: " templateUrl: ['$stateParams',function($stateParams) { return 'templates/' + $stateParams.url ; }], " – rolinger Jun 08 '16 at 18:30
Can you create a plunker or jsfiddle – Dinesh Sundaraneedi Jun 09 '16 at 04:28
i updated my above code with the latest attempts. I am not good with plunker/jsfiddle - can't even make my own code work. lol. – rolinger Jun 10 '16 at 16:57

how to dynamically set templateUrl in ionic tabs?

1 Answers1