JSFiddle - React, Tailwind, and code Playground

by JeffreyTaylor

HTML

<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<!doctype html>
<html ng-app="app">
<body>
<div class="mymenu"></div>
</body>
</html>

CSS

@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');

JavaScript

angular.module('app', []).directive('mymenu', function () {
    
    // below is my first directive.
    // what would you change about this thing?
    
    return {
        restrict: 'C',
        replace: true,
        // this used to be templateUrl, but i couldn't figureout how to
        // do that in jsfiddle
        template: '<div class="navbar nav"><div class="navbar-inner"><ul class="nav"><li class="active"><a href="#">Page One</a></li><li><a href="#">Page Two</a></li><li><a href="#">Page Three</a></li></ul></div></div>',
        link: function (scope, element, attrs) {

            // probably a better way to bind on each li click
            element.find('li').on('click', function (e) {

                // remove the active class from whatever li
                // current has it
                element.find('.active').removeClass('active');

                // get the element that user clicked on
                // -- is there a way to do this without jquery?
                var target = $(e.currentTarget);

                // add active class
                target.addClass('active');

            });
        }
    };
});