Bootstrap-UI - Как использовать TemplateUrl для представления вкладок без манипуляции с URL?

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