使用 ui-router 动态生成的 templateUrl

Question

我想创建动态生成的模板 url 使用我的 ng-click id 的 id。但是我收到以下错误

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

我的路由器代码如下。

$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>

而且我也想用id生成动态控制器。谢谢

Answer 1

在您的路由器代码中，在 url 值下删除 id 之前的斜杠，即

$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 2

filename.indexOf 不是函数：这个错误指向使用了一个不存在的方法我认为它在你的控制器中我在你的代码中找不到它现在。

我们什么时候可以使用 indexOf?

indexOf 与数组相关，例如在您的示例中 filename 应该是 array 以获得 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

在这种情况下它将 return filename.indexOf 不是函数

因此在您的示例中确保您可以将其用作方法。

Answer 3

你试过数组语法了吗？

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

Answer 4

它正在使用 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>

使用 ui-router 动态生成的 templateUrl

Dynamically generated templateUrl using ui-router

model-view-controller

state

angularjs

ui-sref