Angular: Context Menu Hover in Table

http://angularjs.org/

by Amit Vishwakarma

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.3.0.js"></script>
<div ng-controller="MyCtrl">
    <br/>
    <br/>
    <br/>
    <div class="container">
        <div class="row">
            <div class="span2">
                <table class="table">
                    <tr>
                        <td> <a class="btn-link">Row 1</a>

                        </td>
                        <td style="padding:1px">
                            <div show-on-row-hover style="display:none;float:left"> <i tooltip-popup-delay="0" tooltip-placement="top" tooltip="Some tooltip text" class="icon-info-sign"></i>

                            </div>
                            <div show-on-row-hover style="display:none;float:right">
                                <ul show-on-row-hover style="display:none;" class="nav">
                                    <li id="contextmenu" class="dropdown pull-right"> <a class="btn-link dropdown-toggle">
                                    <i class="icon-align-justify"></i>
                                </a>

                                        <ul class="dropdown-menu">
                                            <li> <a class="btn-link">
                                                Entry 1
                                        </a>

                                            </li>
                                            <li> <a class="btn-link">
                                            Entry 2
                                        </a>

                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                  ...

CSS

.table td {
    padding: 8px;
    line-height: 20px;
    text-align: left;
    vertical-align: middle;
    border-top: 1px solid #ced2d9;
}

JavaScript

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

function MyCtrl($scope) {
    $scope.name = 'Superhero';
}

myApp.directive('showOnRowHover',

function () {
    return {
        link: function (scope, element, attrs) {

            element.closest('tr').bind('mouseenter', function () {
                element.show();
            });
            element.closest('tr').bind('mouseleave', function () {
                element.hide();

                var contextmenu = element.find('#contextmenu');
                contextmenu.click();

                element.parent().removeClass('open');

            });

        }
    };
})