Bootstrap-UI - How to use TemplateUrl for a tab view without manipulating the URL?
angular-ui-bootstrap, angularjs, angularjs-ng-include, javascript
Solution
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
Problem
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 component? Also, I need my JSON Object, `model.jo`, in the html pages.