Angular: Context Menu Hover in Table

http://angularjs.org/

by Michael Hunziker

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.4.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>Row 1</a>

                        </td>
                        <td>
                            <div show-on-row-hover style="display:none;float:left">
                                <i tooltip-popup-delay="0"
                                   tooltip-placement="top"
                                   tooltip="Some tooltip textSome tooltip textSome tooltip textSome tooltip textSome tooltip textSome tooltip"
                                   class="icon-info-sign"></i>
                            </div>
                            <div show-on-row-hover style="display:none;float:right">
                                <i class="icon-align-justify"></i>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

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');

            });

        }
    };
})