HTML code<body ng-app=" Components"> "First Tab"> <div>this isThe content of the first tab.</div> </pane> <pane title="Second Tab"> <div>this isThe content of the second tab.</div> </pane> </tabs> </body>JavaScript code angular.module (' Components', []). Directive ('Tabs', function () {return{restrict:'E', transclude:true, scope: {}, Controller: ["$scope", Function ($scope) {varpanes = $scope. Panes = []; $scope.Select=function (pane) {Angular.foreach (panes, function (pane) {pane.selected=false; }); Pane.selected=true; } This. AddPane =function (pane) {if(Panes.length = =0) $scope.Select(pane); Panes.push (pane); }}], Template:'<div class= "tabbable" >'+'<ul class= "Nav nav-tabs" >'+'<li ng-repeat= "pane in Panes" ng-class= "{active:pane.selected}" >'+'<a href= "" ng-click= "select (Pane)" >{{pane.title}}</a>'+'</li>'+'</ul>'+'<div class= "tab-content" ng-transclude></div>'+'</div>', replace:true }; }). Directive ('pane', function () {return{require:'^tabs', restrict:'E', transclude:true, scope: {title:'@'}, Link:function (scope, element, Attrs, Tabsctrl) {Tabsctrl.addpane (scope); }, Template:'<div class= "Tab-pane" ng-class= "{active:selected}" ng-transclude>'+'</div>', replace:true }; })
AngularJs Custom Directives