Menu
I'm learning angular, and have been trying to dynamically load a HTML file fragment into the content pane of a tab.
In this linked plunker I have created an angular module to configure the states
var app = angular.module('Plunker', ['ui.router', 'ui.bootstrap'])
app.config([
'$stateProvider',
'$urlRouterProvider',
function ($stateProvider, $urlRouterProvider) {
$stateProvider
.state("tab1", { url: "/tab1", templateUrl: "tab1.html" })
.state("tab2", { url: "/tab2", templateUrl: "tab2.html" })
.state("tab3", { url: "/tab3", templateUrl: "tab3.html" });
$urlRouterProvider.otherwise('/');
}]);
app.controller("tabsController", function ($rootScope, $scope, $state) {
$scope.tabs = [
{ title: "My Tab 1", route: "tab1", active: true },
{ title: "My Tab 2", route: "tab2", active: false },
{ title: "My Tab 3", route: "tab3", active: false },
];
$scope.go = function (route) {
$state.go(route);
};
$scope.active = function (route) {
return $state.is(route);
};
$scope.$on("$stateChangeSuccess", function () {
$scope.tabs.forEach(function (tab) {
tab.active = $scope.active(tab.route);
});
});
});
and in the index.html body assign the ui-view a name to associate it with the state/route
<body ng-app="Plunker">
<div ng-controller="tabsController">
<uib-tabset>
<uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active" disable="tab.disabled">
<div ui-view="{{tab.route}}"></div>
</uib-tab>
</uib-tabset>
</div>
</body>
Each tab should have content coming from the respective html file fragment tab1.html, tab2.html or tab1.html. But I cant get it to work. Any help making this work would be much appreciated.
567
You want to have one partial for each tab. For that, the named views feature of ui-router can help you. You won't change state, but having the content on dedicated views allows you to keep the parent template light and nicely organize your code. Moreover you could reuse the tab templates elsewhere.
State definition where the tabset component resides:
$stateProvider
.state('example', {
url: '/example',
views: {
"tab1": { templateUrl: "tab1.html" },
"tab2": { templateUrl: "tab2.html" },
"tab3": { templateUrl: "tab3.html" },
}
Tabset definition:
<uib-tabset>
<uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}" ...>
<div ui-view="{{tab.route}}"></div> <!-- ex: <div ui-view="tab1"></div> -->
</uib-tab>
</uib-tabset>
See updated plunker
122
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
