ui-router 中 templateUrl 从一种状态到另一种状态的动态变化

dynamic change of templateUrl in ui-router from one state to another

html:

<a ui-sref="user.tools.selectedTemplate({provider: t.id})" target="_blank">{{t.name}}</a>

以上代码在 ng-repeat 中,许多模板 link 加载了名称和 ID,因此当我单击每个 link 时,href 将更新为附加到所选模板的 ID 号 link。我正在使用相同的控制器生成大约十个模板。我将 ui-sref 中的值从一个状态传递到另一个状态,所以我需要动态 templateUrl, 我尝试了这个 link issue 但我无法发送状态参数,因为主模板页面没有参数。

这里是 ui 路由器代码 app.js

.state('user.tools.template',angularAMD.route({
    url: '/template',
    templateUrl: './views/tools/select-template.html',
    controller: 'selectTplCtrl',
    controllerUrl: 'tools/selecttplCtrl'
}))

.state('user.tools.selectedTemplate',angularAMD.route({
    url: '/selectedTemplate/:provider',
    templateUrl: function($stateParams){
        return './views/tools/selected-template'+'$stateParams.provider'+'.html'
    },
    controller: 'selectedTemplateCtrl',
    controllerUrl: 'tools/selectedTemplateCtrl'
}))

谁能解决这个问题?

我会说你在正确的轨道上..只是 URL 构造应该这样调整:

templateUrl: function($stateParams){
    //return './views/tools/selected-template'+'$stateParams.provider'+'.html'
    return './views/tools/selected-template'+ $stateParams.provider +'.html'
}

在此处查看更多内容,使用动态模板时 UI-Router 可以提供什么 link:

  • Angular UI Router: decide child state template on the basis of parent resolved object
  • Angular and UI-Router, how to set a dynamic templateUrl