AngularJS: Dropdown example with directive

by niden

HTML

<div ng-app="angularBootstrap.dropdown" class="nav nav-pills">
        <li bootstrap-dropdown class="dropdown">
            <a class="dropdown-toggle">
                Dropdown
                <b class="caret"></b>
            </a>
            <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another Action</a></li>
            </ul>                       
        </li>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/angular-1.0.0rc7.min.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style>
body {
    margin-left: 30px;
    margin-top: 30px;
}

JavaScript

angular.module('angularBootstrap.dropdown', []).directive('bootstrapDropdown', function () {
    return function(scope, element, attrs) {
        
        jQuery('html').on('click', function () {
            element.removeClass('open')
        })
        
        jQuery('.dropdown-toggle', element).on('click', function(e) {
            element.toggleClass('open');
            return false;
        });
            
    };
});