Bootstrap-UI - 如何在不操作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网址以显示不同的标签,例如: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