使用 ui-router 动态生成的 templateUrl

Question

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

未捕获的错误：[$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>

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

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 值下删除 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 3

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

在这种情况下，它将返回 filename.indexOf is not a function

所以在您的示例中，请确保您可以将其用作方法。

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