Dynamically generated templateUrl using ui-router

Question

I want to create dynamicall generated template url usilng the id of my ng-click id. But I am getting the following error

Uncaught Error: [$injector:modulerr] Failed to instantiate module mean due to: TypeError: filename.indexOf is not a function

My router code is given below.

$stateProvider.state('file-petition-tab', {
  url: '/file-petition-tab/:id',
  templateUrl: function ($stateParams){
    return 'app/dashboard/views/tabs/tab' + $stateParams.id + '.html';
  },
  controller: 'DashboardController',
  controllerAs: 'vm',
  lazyModules: [
    'app/dashboard/dashboard.controller.js',
    'app/tpl/api.services.js',
  ]
})

My anchor tag code is

<a ui-sref="file-petition-tab({id: menu.formid})"><span>{{menu.form_code}}</span>{{menu.form_desc}}</a>

And I also want to generate dynamic controller using the id. Thanks.

Answer 1

It is working using templateProvider and $stateParams, $templateRequest.

$stateProvider.state('file-petition-tab', {
  url: '/:id',
  templateProvider: function ($stateParams, $templateRequest) {
    var tplURL = "app/dashboard/views/tabs/tab"+$stateParams.id+".html";
    //console.log('$stateParams', $templateRequest(tplURL));
    return $templateRequest(tplURL);
  },
  controller: 'DashboardController',
  controllerAs: 'vm',
  lazyModules: [
    'app/dashboard/views/tabs/tab1.controller.js',
    'app/dashboard/dashboard.controller.js',
    'app/tpl/api.services.js',
  ],
})

and using the anchor by following format

<a ui-sref="file-petition-tab({id: menu.formid})"><span>{{menu.form_code}}</span>{{menu.form_desc}}</a>

Answer 2

In your router code, under url value remove the slash before id that is

$stateProvider.state('file-petition-tab', {
url: '/file-petition-tab:id',
templateUrl: function ($stateParams){
   return 'app/dashboard/views/tabs/tab' + $stateParams.id + '.html';
},
controller: 'DashboardController',
controllerAs: 'vm',
lazyModules: [
  'app/dashboard/dashboard.controller.js',
  'app/tpl/api.services.js',
]
})

Answer 3

filename.indexOf is not a function: this error points to using a method which not exist i think it's in your controller i can't find it in your codes right now.

when we can use indexOf?

indexOf related to array, for example in your sample filename should be array to have indexOf.

var filename = [{title: 'A'}] //should be filesname

//i want to find object with title A, i want to know it's exist or not
var findObject = {title: 'A'};
var indexOf = filename.indexOf(findObject);
//indexOf return 0 if it exist else -1

When indexOf isn't work

var filename = {} //it's object
var filename = "" // it's string
//it's not exist yet

in this cases it will return filename.indexOf is not a function

so in your sample make sure you can use it as method.

Answer 4

Have your tried with the array syntax?

$stateProvider
// .... many states...
  .state('file-petition-tab', {
    url: '/file-petition-tab/:id',
    templateUrl: ['$stateParams', function ($stateParams) {
        return 'app/dashboard/views/tabs/tab' + $stateParams.id + '.html';
    }],
    controller: 'DashboardController',
    controllerAs: 'vm',
    lazyModules: [
      'app/dashboard/dashboard.controller.js',
      'app/tpl/api.services.js',
    ]
  })