Bootstrap-UI - 如何在不操纵 URL 的情况下将 TemplateUrl 用于选项卡视图？

Question

我正在处理一些 Bootstrap-UI tabs，但我无法在线找到使用 templateURL 而不操纵页面的 URL 的实例。这是我想做的事情：

HTML

<uib-tabset active="active">
    <uib-tab ng-repeat="tab in model.tabs" index="$index" heading="{{tab.title}}">
        {{tab.content}}
    </uib-tab>
</uib-tabset>

JS

model.jo = {...} // a gigantic JSON object - needs to be available in the templates.
model.tabs = [
    {
        title: "Visualized",
        content: url('vis.html')
    },
    {
        title: "Pure JSON",
        content: url('json.html')
    }
]

我在网上找到的大部分内容都使用 $routeProvider 和 $locationProvider 修改 URL 以显示不同的选项卡，例如：http://embed.plnkr.co/TMN3KNlS4Dv90SvbTQKJ/。我不想那样做。

有什么方法可以像定义组件那样定义 templateUrl 吗？

此外，我需要 JSON 对象 model.jo，在 html 页中。

Answer 1

您可以使用 ng-include 通过使用其模板 URL 来呈现模板。您唯一需要在 tabs 对象中更改的是 templateUrl 而不是 content 属性.

<uib-tabset active="active">
    <uib-tab ng-repeat="tab in model.tabs" index="$index" heading="{{tab.title}}">
        <div ng-include="tab.templateUrl"></div>
    </uib-tab>
</uib-tabset>

将 tabs 对象更改为

model.tabs = [
    {
        title: "Visualized",
        templateUrl: 'vis.html'
    },
    {
        title: "Pure JSON",
        templateUrl: 'json.html'
    }
]

此外，ng-include 使用与源相同的控制器，因此您将能够在这两个页面中访问模型，特别是 model.jo。资料来源：Pass parameter to Angular ng-include

Bootstrap-UI - 如何在不操纵 URL 的情况下将 TemplateUrl 用于选项卡视图？

Bootstrap-UI - How to use TemplateUrl for a tab view without manipulating the URL?

javascript

angularjs

angular-ui-bootstrap

angularjs-ng-include