Bootstrap-UI - 如何在不操作URL的情況下將TemplateUrl用於標籤視圖？

我正在處理一些Bootstrap-UI tabs，但我無法找到使用templateURL而不操作頁面URL的在線實例。這是我想做什麼：Bootstrap-UI - 如何在不操作URL的情況下將TemplateUrl用於標籤視圖？

HTML

<uib-tabset active="active"> 
    <uib-tab ng-repeat="tab in model.tabs" index="$index" heading="{{tab.title}}"> 
     {{tab.content}} 
    </uib-tab> 
</uib-tabset>

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頁面。

來源

2016-10-26 Travis Heeter

您可以使用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

來源

2016-10-26 14:04:36

很酷，我怎麼能發送我的數據到這些文件？我有一個大的JSON對象需要可用。 –

好的，發現ng-include使用它來自同一個控制器。來源：http://stackoverflow.com/questions/25565475/pass-parameter-to-angular-ng-include另外，我測試了它，它的工作原理。 –

Bootstrap-UI - 如何在不操作URL的情況下將TemplateUrl用於標籤視圖？

回答

相關問題