Angular: Empty Fiddle

http://angularjs.org/

by boneskull

HTML

<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<tabs ng-cloak>
    <tab>
        <tab-header><i class="icon-frown"></i>Foo</tab-header>
        <tab-content>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id dolor sodales, molestie orci sed, luctus magna. Pellentesque ultrices in velit a viverra. Cras eget eros facilisis, tempus est ut, dapibus nulla. Curabitur at porta augue. Donec lacinia enim lacus, id fringilla lectus vulputate vel. Etiam a mi ultricies, semper mauris nec, congue lorem. Quisque semper luctus risus, vitae pharetra massa sagittis vel.
</tab-content>
    </tab>
    <tab><tab-header><i class="icon-lemon"></i>Bar</tab-header>
        <tab-content>Donec placerat est sed dolor pharetra iaculis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras scelerisque sollicitudin tellus lacinia auctor. Donec pellentesque accumsan gravida. Pellentesque viverra id lorem sit amet molestie. Etiam facilisis purus sed lacus blandit, sed sodales velit congue. Pellentesque tempus lectus nec mattis elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc varius tristique justo at accumsan.
        </tab-content>
    </tab>
    <tab><tab-header><i class="icon-thumbs-down"></i>Baz</tab-header>
        <tab-content>Mauris a neque felis. Integer eu est sed odio auctor venenatis. Vestibulum nisi augue, interdum id euismod ut, blandit sed augue. Maecenas in vulputate tortor. Vestibulum facilisis odio nec condimentum sagittis. Fusce aliquet elit vitae tortor lobortis, eu semper neque sollicitudin. Mauris cursus nibh nec metus accumsan condimentum. Vestibulum porta, nulla ut facilisis feugiat, dui nisi sagittis est, eget congue neque nisi eu tortor. Donec diam nisi, venenatis sollicitudin erat sed, bibendum molestie arcu. Ut eu porttitor dui, in lobortis sem. Mauris egestas...

CSS

ul {
    list-style: none;
    background: darkblue;
    color: white;
}
li {

    display: inline;
    padding: 8px;
}
li:hover {
    background: grey;
}
li.selected {
    background: dark-grey;
}
p {
    display:none;
}
p.selected {
    display: block;
}

JavaScript

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

myApp.directive('tabs', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<ul ng-transclude></ul>',
        transclude: true
    };
});


myApp.directive('tab', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<li ng-transclude></li>',
        transclude: true,
        link: function (scope, elm) {
            elm.bind('click', function () {
                scope.selected = true;
                scope.$emit('deselect');
                elm.addClass('selected');
            });
        }
    };

});

myApp.directive('tabHeader', function () {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        template: '<em ng-transclude></em>'

    };
});

myApp.directive('tabContent', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<p ng-transclude></p>',
        transclude: true,
        link: function (scope, elm) {
            scope.$watch('selected', function (newval) {
                if (newval) {
                    elm.addClass("selected");
                } else {
                    elm.removeClass('selected');
                }

            });
            
        }
    };

    });