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

admin管理员组

文章数量:1391964

I'm working on some Bootstrap-UI tabs, but I can't find an instance online that uses templateURL without manipulating the URL of the page. Here's what I'd like to do:

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')
    }
]

Most of the stuff I found online uses $routeProvider & $locationProvider to doctor up the URL in order to show different tabs, like this one: /. I don't want to do that.

Is there any way to just define the templateUrl like you'd do for a ponent?

Also, I need my JSON Object, model.jo, in the html pages.

I'm working on some Bootstrap-UI tabs, but I can't find an instance online that uses templateURL without manipulating the URL of the page. Here's what I'd like to do:

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')
    }
]

Most of the stuff I found online uses $routeProvider & $locationProvider to doctor up the URL in order to show different tabs, like this one: http://embed.plnkr.co/TMN3KNlS4Dv90SvbTQKJ/. I don't want to do that.

Is there any way to just define the templateUrl like you'd do for a ponent?

Also, I need my JSON Object, model.jo, in the html pages.

• javascript
• angularjs
• angular-ui-bootstrap
• angularjs-ng-include

Share Improve this question Follow edited Jun 13, 2017 at 15:03 Pankaj Parkar 136k2323 gold badges240240 silver badges303303 bronze badges asked Oct 26, 2016 at 14:00 Travis HeeterTravis Heeter 14.1k1313 gold badges9595 silver badges142142 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

You could use ng-include to render template by using its template URL. The only thing you need to change in your tabs object is, have templateUrl instead of content property.

<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>

Change tabs object to

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

Also, ng-include uses the same controller as the source, so you will be able to access the model, specifically model.jo, in both of those pages. Source: Pass parameter to Angular ng-include

本文标签： javascriptBootstrapUIHow to use TemplateUrl for a tab view without manipulating the URLStack Overflow