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 中，其中包含许多加载了名称和 ID 的模板链接，因此当我单击每个链接时，href 将更新为附加到所选模板链接的 ID 号.我正在使用相同的控制器生成大约十个模板.我将 ui-sref 中的值从一种状态传递到另一种状态，因此我需要动态 templateUrl，我试过这个 link issue 但我无法发送 stateparams 因为主要模板页面没有参数.

Above code is in ng-repeat with many template links loaded with name and id so when i click each link , href will be updated with id number appended to selected template link. I am generating about ten templates with same controller. I am passing value in ui-sref from one state to another so i need dynamic templateUrl, i tried this link issue but i cant able to send stateparams since the main template page has no params.

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

Here the ui router code in 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 构造应该像这样调整:

I would say that you are on the right track.. just URL construction should be adjusted like this:

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

在此处查看更多信息，当使用动态模板链接时，我们可以使用 UI-Router 获得什么:

See more here, what we can have with UI-Router when working with dynamic template link:

• Angular UI 路由器 - 动态模板URL
• Angular UI Router:根据父解析对象决定子状态模板
• Angular 和 UI-Router，如何设置动态模板 URL

这篇关于ui-router 中 templateUrl 从一种状态到另一种状态的动态变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！