#contextMenu

AngularJS UI Bootstrap Module for adding context menus to elements. Demo

bower install angular-bootstrap-contextmenu

Usage

Add a reference to contextMenu.js. In your app config add ui.bootstrap.contextMenu as a dependency module.

View

<div>
    <div ng-repeat="item in items" context-menu="menuOptions">Right Click: {{item.name}}</div>
</div>
<div ng-bind="selected"></div>

Controller

$scope.selected = 'None';
$scope.items = [
    { name: 'John', otherProperty: 'Foo' },
    { name: 'Joe', otherProperty: 'Bar' }
};

$scope.menuOptions = [
    ['Select', function ($itemScope) {
        $scope.selected = $itemScope.item.name;
    }],
    null, // Dividier
    ['Remove', function ($itemScope) {
        $scope.items.splice($itemScope.$index, 1);
    }]
];

Menu Options

Every menu option has an array with 2-3 indexs. Most items will use the [String, Function] format. If you need a dynamic item in your context menu you can also use the [Function, Function] format.

The third optional index is a function used to enable/disable the item. If the functtion returns true, the item is enabled (default). If no function is provided, the item will be enabled by default.

$scope.menuOptions = [
    [function ($itemScope, $event) {
        return $itemScope.item.name;
    }, function ($itemScope, $event) {
        // Action
    }, function($itemScope, $event) {
        // Enable or Disable
        return true; // enabled = true, disabled = false
    }]
];

The menuOptions can also be defined as a function returning an array. An empty array will not display a context menu.

<div ng-repeat="item in items" context-menu="menuOptions(item)">Right Click: {{item.name}}</div>

$scope.menuOptions = function (item) {
    if (item.name == 'John') { return []; }
    return [
        [function ($itemScope) {
            return $itemScope.item.name;
        }, function ($itemScope) {
            // Action
        }]
    ];
};

Model Attribute (optional)

In instances where a reference is not passed through the $itemScope (i.e. not using ngRepeat), there is a model attribute that can pass a value.

<div context-menu="menuOptions" model="expression">Some item name here</div>

The model is evaluated as an expression using $scope.$eval and passed as the third argument.

$scope.menuOptions = [
    [function ($itemScope, $event, model) {
        return $itemScope.item.name;
    }, function ($itemScope, $event, model) {
        // Action
    }, function($itemScope, $event, model) {
        // Enable or Disable
        return true; // enabled = true, disabled = false
    }]
];

Style Overlay

To give a light darker disabled tint while the menu is open add the style below.

body > .dropdown {
    background-color: rgba(0, 0, 0, 0.1);
}

Limitations (work in progress)

Nested lists are not supported yet, because I have not needed it yet. If you add it please do a pull request.

$scope.menuOptions = [
    ['Parent Item 1', function ($itemScope) {
        // Code
    },  ['Child Item 1', function ($itemScope) {
            // Code
        }],
        ['Child Item 2', function ($itemScope) {
            // Code
        }]
    ]
];