Динамически генерируемый templateUrl с использованием ui-router

Question

Я хочу создать динамически генерируемый шаблон URL, используя идентификатор моего ng-click id. Но я получаю следующую ошибку

Uncaught Ошибка: [$injector:modulerr] Не удалось создать экземпляр модуля из-за: TypeError: filename.indexOf не является функцией

Код моего роутера указан ниже.

$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',
  ]
})

Мой код тега привязки

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

И я также хочу создать динамический контроллер, используя идентификатор. Благодарю.

Answer 1

Он работает с использованием templateProvider и $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',
  ],
})

и используя якорь в следующем формате

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

Answer 2

В коде вашего роутера под значением url удалите косую черту перед идентификатором

$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 не является функцией: эта ошибка указывает на использование метода, который не существует, я думаю, что он находится в вашем контроллере, я не могу найти его в ваших кодах прямо сейчас.

когда мы можем использовать indexOf?

indexOf относится к массиву, например, в вашем примере filename должен быть массив, чтобы иметь 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

когда indexOf не работа

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

в этом случае он вернет filename.indexOf не является функцией

поэтому в вашем примере убедитесь, что вы можете использовать его в качестве метода.

Answer 4

Вы пробовали с синтаксисом массива?

$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',
    ]
  })