• Following the same format as the previous example, we will now create a custom directive to extend the UI Bootstrap functionality:
    .directive('customTabs', function() {
      return {
        restrict: 'E',
        transclude: true,
        scope: {},
        controller: [ "$scope", function($scope) {
          var panes = $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);
          }
    
        }],
        // Using inline template
        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: '^customTabs',
        restrict: 'E',
        transclude: true,
        scope: { title: '@' },
        link: function(scope, element, attrs, tabsCtrl) {
          tabsCtrl.addPane(scope);
        },
        // Using inline template
        template:
        '<div class="tab-pane" ng-class="{active: selected}" ng-transclude>' +
        '</div>',
        replace: true
      };
    })
  • Now, we will add the HTML markup to the home.html file:
    <!-- Custom Boostrap Tab -->
    <div style="width:600px; margin:20px auto;">
      <custom-tabs>
        <pane title="Custom Tab One">
          <div>Tab One Content.</div>
        </pane>
        <pane title="Custom Tab Two">
          <div>Tab Two Content.</div>
        </pane>
        <pane title="Custom Tab Three">
          <div>Tab Three Content.</div>
        </pane>
      </custom-tabs>
    </div>

    Tip

    Note that the style tag on the HTML examples is not a good practice, but we use it just to center the example code on the screen. Please don’t do that in production, keep your CSS files in separated files.