使用ui-router动态生成templateUrl

时间:2018-02-22 06:43:12

标签: angularjs model-view-controller state ui-sref

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

  

未捕获错误:[$ 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生成动态控制器。感谢。

4 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

在路由器代码中,在 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',
]
})

答案 2 :(得分:0)

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不是函数

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

答案 3 :(得分:0)

您是否尝试过使用数组语法?

,