Using templates in tabs with ngStrap 2.1.0+?

Question

In version 2.1.0 of ngStrap they rewrote the Tabs directive. Their documentation on tabs now does not have any examples using templates in tabs. I had Tabs working on my page using 2.0.5 but had to upgrade due to other things not working. I want to make sure i'm not missing something before I open an issue on github.. ngStrap's site still lists template as an option, even though they removed all their examples.

The code that makes my tabs is:

$scope.tabs = [
{
    title: "Tab 1",
    template: "tab1.html"
},
{
    title: "Tab 2",
    template: "tab2.html"
}];

I have tried several different types of displaying the tabs. They're below and can be tested in this plnkr: http://plnkr.co/edit/zEQ8mP6IkvCVPlYqxR59?p=preview

Attempt 1:

<div bs-tabs>
    <div ng-repeat="tab in tabs" title="{{ tab.title }}"  template="{{tab.template}}" bs-pane></div>
</div>

Attempt 2:

<div bs-tabs>
    <div ng-repeat="tab in tabs" title="{{ tab.title }}"  template="tab.template" bs-pane></div>
</div>

Attempt 3:

<div bs-tabs>
    <div ng-repeat="tab in tabs" title="{{ tab.title }}"  ng-bind="tab.template" bs-pane></div>
</div>

Attempt 4:

<div bs-tabs>
    <div ng-repeat="tab in tabs" title="{{ tab.title }}"  template="tab.template" bs-pane></div>
</div>

Any help is appreciated! Thanks!

Answer 1

I ended up creating a workaround. I'm posting so I can hopefully help someone else down the road.

I ended up creating a new directive called myTabs, so in index.html i just put

<my-tabs tabs="tabs"></my-tabs>

There's also a "static-include" directive which is basically ng-include but does not create a new scope.

Hope this helps someone down the road!

Here's the plnkr: http://plnkr.co/edit/MVbAN0uif9REjPjUusnr?p=preview

app.js has:

$scope.tabs = [
{
  title: "Tab 1",
  show: true, //this is so this tab shows by default
  templateUrl: "tab1.html"
},
{
  title: "Tab 2",
  templateUrl: "tab2.html"
}];

myTabs.html - this is the template for tabs.

<ul class="myTabs">
    <li ng-repeat="tab in tabs" ng-class="{active: tab.show}" ng-click="setActiveTab(tab.title)">{{tab.title}}</li> 
</ul> <br/><br/>
<div ng-repeat="tab in tabs" ng-show="tab.show"> 
    <div static-include="{{tab.templateUrl}}"></div>
</div>

myTabs.js

(function (ng) {
    ng.module('plunker')
        .directive('myTabs', [function() {
                return {
                    restrict: 'AE',
                    scope: false,
                    templateUrl: 'myTabs.html',
                    link: function(scope, element, attrs) {
                        scope.tabs = scope.$eval(attrs.tabs);

                        scope.setActiveTab = function(title) {
                            for (var i = 0; i < scope.tabs.length; i++) {
                                scope.tabs[i].show = false; // hide all the other tabs 

                                if (scope.tabs[i].title === title) {
                                    scope.tabs[i].show = true; // show the new tab 
                                }
                            }
                        }
                    }
                };
            }
        ])

    .directive('staticInclude', function ($http, $templateCache, $compile) {
        return function (scope, element, attrs) {
            var templatePath = attrs.staticInclude;
            $http.get(templatePath, { cache: $templateCache }).success(function (response) {
                var contents = element.html(response).contents();
                $compile(contents)(scope);
            });
        };
    });
}(angular));

style.css

.myTabs {
  list-style: none;
  position: relative;
  text-align: left;
  float: left;
  border-bottom: 1px solid lightgrey;
  width: 100%;
  padding-left: 0; }
  .myTabs li {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 15px 8px 15px 50px;
    font-weight: 0;
    float: left;
    display: block;
    padding: 10px;
    background-color: white;
    border-bottom: 1px solid lightgrey;
    margin: 0;
    margin-bottom: -1px; }
    .myTabs li:hover {
      background-color: lightgrey;
      cursor: pointer; }
  .myTabs li.active {
    display: block;
    padding: 10px;
    background-color: white;
    border-bottom: 0px solid lightgrey;
    border-top: 1px solid lightgrey;
    border-left: 1px solid lightgrey;
    border-right: 1px solid lightgrey; }
    .dsTabs li.active:hover {
      background-color: white;
      cursor: pointer; }