How to create custom TabControl Directive in AngularJS

Question

I'm currently using Zurb Foundation 4 for my CSS/Grid Framework and they have a really nice Tab Control. However, when it is on a page that is loaded via ng-view the tab control doesn't work right.

So, I'd thought I'd write my own directive since I will be using this across our site. However, once I got into it I soon realized I was in over my head.

I've provided an example of what I am trying to do and then an example of my actual mess of code

Static example: Here is what I am trying to accomplish. See full code example on JsFiddle. http://jsfiddle.net/aYTaN/1/

<div class="tab-container">

    <p class="active-tab">
        <a href="">Tasks</a>
    </p>
    <p>
        <a href="">Parts</a>
    </p>

    <section>
        Tab 1 content
    </section>

    <section style="display:none">
        Tab 2 Content
    </section>

</div>

Here's the actual code I have that is not working: http://jsfiddle.net/dxwc9/3/

app.directive('tabControl', function($rootScope) {
    'use strict';

    return {

        restrict: 'E',

        link: function(scope, element, attrs) {

            console.log(attrs.tabs);

            var tabs = attrs.tabs.split(',');

            var tabContainer = angular.element('<div class="tab-container"></div>'),
                tab = angular.element('<p><a href=""></a></p>'),
                content = angular.element('<section></section>');

            for (var i = 0; i<tabs.length; i++){

                tabContainer.append(tab);

                var title = tab.find('a');

                title.html(tabs[i]);

                tabContainer.append(content);

            }


        }


    }

});

I would really appreciate any help please.

Thank you,

Chris

Ryan Q · Accepted Answer · 2013-04-22 21:28:50Z

8

The angularui/bootstrap project has a very simple implementation with tabs and panes (your sections equivalent). Check it out on Github

The basic idea is creating two directives (one for the tabs, and one for the sections) and having a common controller communicate between them.

answered Apr 22, 2013 at 21:28

Ryan Q

10.7k2 gold badges36 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ryan Q Over a year ago

The tabs has been updated to tab-set, which is a bit more complicated on the code side, but the same concepts still apply with having a common controller.

Collectives™ on Stack Overflow

How to create custom TabControl Directive in AngularJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related