angular tabs take 1
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<div ng-app="sco" ng-controller="appCtrl">
<tabs>
<pane title="Tab 1" href="#/tab1">
tab 1 content. <a href="" ng-click="selectPane(1)">select tab 2</a>
</pane>
<pane title="Second tab" href="#/tab2">
tab 2 content
</pane>
</tabs>
</div>
JavaScript
'use strict';
angular.module('sco', [])
.service('tabService', function() {
var panes = [];
return {
get: function() {
return panes;
}
,select: function(pane) {
angular.forEach(panes, function(pane) {
pane.selected = false;
});
if (typeof pane == 'number') {
pane = panes[pane];
}
pane.selected = true;
}
,add: function(pane) {
if (panes.length == 0) {
this.select(pane);
}
panes.push(pane);
}
,find: function(href) {
var myreturn = null;
angular.forEach(panes, function(pane) {
if (href === pane.href.substr(1)) {
myreturn = pane;
}
});
return myreturn;
}
}
})
.directive('tabs', function() {
return {
restrict: 'E'
,transclude: true
,scope: {}
,controller: function($scope, $element, $location, tabService) {
$scope.panes = tabService.get();
$scope.selectPane = function(pane) {
tabService.select(pane);
}
this.addPane = function(pane) {
tabService.add(pane);
}
// watch for changes in the current url
$scope.$watch(
function() {
return $location.path();
}
,function(path) {
var pane = tabService.find(path);
if (pane) {
$scope.selectPane(pane);
}
}
);
}
,template:
...