<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js@*" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="app">
<h1>Tabs, tabs, tabs!</h1>
<tabset>
<tab heading="Tab 1">
Lorem ipsum dolor sit amet, ut eam nullam utroque liberavisse, ea
graecis tractatos contentiones quo. Ipsum phaedrum scripserit sit id,
eu insolens indoctum vel, eos eu offendit delectus tincidunt. Eum
nostrum reprehendunt in, ullum nostrud legimus ei quo. Sed et elitr
corrumpit. Nibh maiestatis voluptatum has no, at est inermis epicuri,
omnis temporibus cu mei. Legere scriptorem voluptatibus et est, ea
noluisse deterruisset sea.
</tab>
<tab heading="Tab 2">
Just another tab!
</tab>
</tabset>
<button class="open-tab-1">Open Tab 1</button>
<button class="open-tab-2">Open Tab 2</button>
</body>
</html>
;(function(window) {
angular.module('app', [])
.directive('tabset', function() {
return {
restrict: 'E',
transclude: true,
scope: { },
templateUrl: 'tabset.html',
bindToController: true,
controllerAs: 'tabset',
controller: function() {
var self = this;
self.tabs = [];
self.addTab = function addTab(tab) {
self.tabs.push(tab);
if(self.tabs.length === 1) {
tab.active = true;
}
};
self.select = function(selectedTab) {
angular.forEach(self.tabs, function(tab) {
if(tab.active && tab !== selectedTab) {
tab.active = false;
}
});
selectedTab.active = true;
};
}
};
})
.directive('tab', function() {
return {
restrict: 'E',
transclude: true,
template: '<div role="tabpanel" ng-show="active" ng-transclude></div>',
require: '^tabset',
scope: {
heading: '@'
},
link: function(scope, elem, attr, tabsetCtrl) {
scope.active = false;
tabsetCtrl.addTab(scope);
}
};
});
})(window);
/* Styles go here */
<div role="tabpanel">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation"
ng-repeat="tab in tabset.tabs"
ng-class="{'active': tab.active}">
<a href=""
role="tab"
ng-click="tabset.select(tab)">{{tab.heading}}</a>
</li>
</ul>
<ng-transclude>
</ng-transclude>
</div>