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!

I think you'd be better of checking out angular ui: http://angular-ui.github.io/bootstrap/#/tabs — OneHoopyFrood, Oct 27 '14 at 23:32

score 3 · Accepted Answer · answered Oct 27 '14 at 23:19

3

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.

answered Oct 27 '14 at 23:19

Reto Aebersold

16,306
5
55
74

This one works, but I have to start the tabs using $timeout. Somehow it does not work well without $timeout. – David Oct 30 '14 at 00:00
It may be that the DOM/jQuery hasn't finished loading/processing yet? – Kolban Dec 03 '14 at 03:51

score 1 · Answer 2 · answered Oct 28 '14 at 07:55

1

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

answered Oct 28 '14 at 07:55

Coldstar

1,324
1
12
32

1

This is an excellent option, but the site I'm working on is not mine and they are "married" with jquery-ui, so for this specific case, that is not an option. – David Oct 30 '14 at 00:01
This is not an answer but is instead an opinion. I believe the original poster's question to be of value. – Kolban Dec 03 '14 at 03:47

AngularJS and JQuery UI Tabs

2 Answers2

Linked