如何在不操纵URL的情况下为选项卡视图使用TemplateUrl

Question

我正在研究一些Bootstrap-UI选项卡，但我找不到一个使用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。源代码:将参数传递给Angular ng-include