AngularJS and JQuery UI Tabs

Question

I've seen some samples of tabs with AngularJS, and very few about JQueryUI tabs with AngularJS, so I tried to create two directives to create the tabs container, and the tab items.

Here is the sample code I've created: http://jsfiddle.net/davidzapata/tvq6w1g9/2/

HTML

<div ng-app="biApp">
    <div ng-controller="MyCtrl">
        <h1>{{greeting}}</h1>
        <jqueryuitabs>
            <jqueryuitab id="tab1" title="Tab 1">Tab 1 content</jqueryuitab>
            <jqueryuitab id="tab2" title="Tab 2">Tab 2 content</jqueryuitab>
            <jqueryuitab id="tab3" title="Tab 3">Tab 3 content</jqueryuitab>
        </jqueryuitabs>
    </div>
</div>

JS

var appModule = angular.module('biApp', []);

appModule.controller('MyCtrl', function($scope){
    $scope.greeting = 'Hi!';
});

appModule.directive('jqueryuitabs', function () {
    return {
        restrict: 'E',
        transclude: true,
        template: '<div><ul><li ng-repeat="tab in tabs"><a href="#{{tab.id}}">{{tab.title}}</a></li></ul><ng-transclude></ng-transclude></div>',
        controller: function($scope) {
            console.log('jqueryuitabs Controller');
            $scope.tabs = [];

            this.addTab = function(tab){
                console.log('Add Tab', tab);
                $scope.tabs.push(tab);
            }
        },
        link: function(scope, elm, attrs) {
            console.log('jqueryuitabs link');
            var jqueryElm = $(elm[0]);
            $(jqueryElm).tabs();
        }
    };
});

appModule.directive('jqueryuitab', function () {
    return {
        restrict: 'E',
        require: '^jqueryuitabs',
        transclude: true,
        scope: {
            id: "@",
            title: "@"
        },
        template: '<div id="{{id}}" ng-transclude></div>',
        link: function (scope, element, attrs, tabsCtrl) {
            console.log('Tab link');

            tabsCtrl.addTab(scope);
        }
    };
});

I've never created code before in jsfiddle.net, but that code seems to load the required libraries. Even so, the controller works, the "greeting" model is rendered, but the tabs are not working, and they are not even transcluding the content into the respective elements.

Of course, I'm an new using AngularJS, but I haven't figured out how to solve this problem.

Thanks you!

Answer 1

Use the ng-transclude on a div in your jqueryuitabs directive:

template: '<div><ul><li ng-repeat="tab in tabs"><a href="#{{tab.id}}">{{tab.title}}</a></li></ul><div ng-transclude></div></div>'

See jsfiddle .

Answer 2

Stop the custom implementations and just use http://angular-ui.github.io/bootstrap/ . Its more efficient and you can proceed to focus on more important tasks