Directive to UI Bootstrap Tabs

by Luca De Nardi

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<container ref="Container" title="Custom Directives -> UI Bootstrap Directive">
    <h4>Custom directives are transformed into UI Bootstrap Markup but they aren't displayed as UI Tabs</h4>
    <br>
    <simple ref="Simple 1"></simple>
    <tab-container ref="Tab 1" role="tabpanel">
        <simple ref="Simple 2"></simple>
        <simple ref="Simple 3"></simple>
        <sub ref="Subpanel">
            <simple ref="Simple 4"></simple>
        </sub>
        <simple ref="Simple 5"></simple>
    </tab-container>
</container>

<br><br><br>
    <h2>Rendered UI Bootstrap Mark-Up</h2>
    <h4>If I copy-paste the markup generated above, the tabs are correctly displayed</h4>
    <br>
    <div style="display:inline-block;display:inline-block" id="Simple 1" heading="Simple 1" ref="Simple 1" class="ng-scope"><span>Simple 1</span></div>
    <tabset id="Tab 1" ref="Tab 1" role="tabpanel" class="ng-scope">
        <tab id="Simple 2" heading="Simple 2" ref="Simple 2" class="ng-scope"><span>Simple 2</span></tab>
        <tab id="Simple 3" heading="Simple 3" ref="Simple 3" class="ng-scope"><span>Simple 3</span></tab>
        <tab id="Subpanel" heading="Subpanel" ref="Subpanel" class="ng-scope"><span>Subpanel</span>
            <div style="display:inline-block;display:inline-block" id="Simple 4" heading="Simple 4" ref="Simple 4" class="ng-scope"><span>Simple 4</span></div>
        </tab>
        <tab id="Simple 5" heading="Simple 5" ref="Simple 5" class="ng-scope"><span>Simple 5</span></tab>
    </tabset>

JavaScript

//Angular App
var myApp = angular.module('myApp', ['ui.bootstrap']);
myApp.controller('DemoCtrl',['$scope', function($scope){
}])

.directive('container', function(){
    return {
        restrict: 'E',
        scope: false,
        transclude: true,
        replace: true,
        template: function(elem, attr){
            var newTag = "<div";
            if(typeof $(elem).attr('ref') !== typeof undefined && $(elem).attr('ref') !== false){
                newTag += " id='" + attr.ref + "'";
            }
            newTag += ">";
            return newTag + "<h2>" + attr.title + "</h2><div ng-transclude></div></div>"
        },
        link: function(scope, element){
            scope.isEnabled = true;
        }
    }
})
.directive('simple', ['$compile', function($compile){
        return {
            restrict: 'E',
            scope: false,
            transclude: true,
            replace: true,
            priority: 1000,
            terminal: true,
            template: function(elem, attr){
                var newTag = '';
                var parentRole = elem[0].parentElement.getAttribute('role');
                if(parentRole == "tabpanel"){
                    newTag += "<tab";
                }else{
                    newTag += "<div style='display:inline-block'";
                }
                if(typeof $(elem).attr('ref') !== typeof undefined && $(elem).attr('ref') !== false){
                    newTag += " id='" + attr.ref + "' heading='" + attr.ref + "'";
                }
                newTag += "><span>" + attr.ref + "</span>";
                newTag += "<replace></replace>";
                if(parentRole == "tabpanel"){
                    newTag += '</tab>';
                }else{
                    newTag += '</div>';
                }
                return newTag;
            },
            link:function(scope,element,attrs,ctrl, transclude){
                return {
                    pre: function preLink(scope, element,...