ContextMenu
AngularJS UI引导模块用于将上下文菜单添加到元素中。演示
npm install angular-bootstrap-contextmenu或bower install angular-bootstrap-contextmenu
用法
将参考添加到contextMenu.js 。在您的应用程序配置中，添加ui.bootstrap.contextMenu作为依赖关系模块。
上下文菜单设置
context-menu-on （默认值：'ContextMenu'）逗号分隔字符串字面，其中包含将触发上下文菜单出现的事件。-
context-menu-empty-text （默认值：'空'）一个角度表达式，该角度表达式包含上下文菜单为空的字符串 context-menu-class - 一个字符串字面包含要添加到上下文菜单的自定义类（-
allow-event-propagation （默认值：false）一个布尔值确定是否允许事件传播。请注意，如果您将其设置为True，并且不要使用其他内容来捕捉，则浏览器的上下文菜单将显示在此库上下文菜单的顶部。 -
model - （请参见下面的模型属性） -
close-menu-on （默认值：'）字符串字面包含用于触发菜单关闭操作的事件。
看法
Right Click: {{item.name}}
"> < div >
< div ng-repeat =" item in items " context-menu =" menuOptions " > Right Click: {{item.name}} div >
div >
< div ng-bind =" selected " > div > Left Click: {{item.name}}
"> < div >
< span > you can specify the event on how the menu opens: span >
< div ng-repeat =" item in items " context-menu =" menuOptions " context-menu-on =" click " > Left Click: {{item.name}} div >
div >
< div ng-bind =" selected " > div >回调参数
当前有5个参数正在传递给回调：
-
$itemScope指令的范围 event - 与此指令相关的事件（通常是contextmenu ）-
modelValue请参见下面的“模型属性” -
text - 文本的HTML值。通常，这包含默认情况下围绕文本的标签。 -
$li选择的列表项目
控制器
$scope . selected = 'None' ;
$scope . items = [
{ name : 'John' , otherProperty : 'Foo' } ,
{ name : 'Joe' , otherProperty : 'Bar' }
] ;
$scope . menuOptions = [
// NEW IMPLEMENTATION
{
text : 'Object-Select' ,
click : function ( $itemScope , $event , modelValue , text , $li ) {
$scope . selected = $itemScope . item . name ;
}
} ,
{
text : 'Object-Remove' ,
click : function ( $itemScope , $event , modelValue , text , $li ) {
$scope . items . splice ( $itemScope . $index , 1 ) ;
}
} ,
// LEGACY IMPLEMENTATION
[ 'Select' , function ( $itemScope , $event , modelValue , text , $li ) {
$scope . selected = $itemScope . item . name ;
} ] ,
null , // Dividier
[ 'Remove' , function ( $itemScope , $event , modelValue , text , $li ) {
$scope . items . splice ( $itemScope . $index , 1 ) ;
} ]
] ; 菜单选项
菜单选项传递给上下文 - 可能是：
- 一个包含对象的数组来表示上下文菜单中的每个项目
- 返回对象数组的功能（如上）
- 承诺返回对象或函数数组（如上）
新实施
每个菜单选项都由包含以下属性的对象表示：
| 财产 | 类型 | 描述 |
|---|
| 文本 | 功能/字符串 | 返回字符串或实际字符串本身的函数。必须指定文本或HTML |
| html | 功能/字符串 | 返回用于此菜单选项的HTML的函数或字符串。必须指定文本或HTML |
| 编译 | 布尔 | 要编译HTML字符串以使用HTML字符串中的自定义指令 |
| 点击 | 功能 | 单击选项的要调用的功能 |
| 启用 | 功能/布尔值 | 函数返回该选项是否已启用，或布尔值 |
| 显示 | 功能/布尔值 | 无论是否显示该选项，还是布尔值。如果不显示，根本没有创建任何元素，将执行与项目的任何内容（事件，返回孩子的功能等） |
| 孩子们 | 数组/功能/承诺 | [数组] - 级别的对象的实际数组； [函数] - 返回一个对象数组，或返回以下指定的数组或承诺的函数； [诺言] - 用数组或返回上面指定的数组的函数解决 |
| HASTOPDIVIDER | 功能/布尔值 | 函数/布尔值返回是否在当前项目之前附加分隔线。默认为false |
| HasbottomDivider | 功能/布尔值 | 功能/布尔值返回是否在当前项目之后附加分隔线。默认为false |
传统实施（仍然受支持，但不会再更新）
每个菜单选项都有一个带有2-3个索引的数组。大多数项目将使用[String, Function]格式。如果您在上下文菜单中需要动态项目，则还可以使用[Function, Function]格式。
第三个可选索引是用于启用/禁用项目的函数。如果函数返回true，则启用项目（默认）。如果没有提供功能，则默认情况下将启用该项目。
$scope . menuOptions = [
[ function ( $itemScope , $event , modelValue , text , $li ) {
return $itemScope . item . name ;
} , function ( $itemScope , $event ) {
// Action
} , function ( $itemScope , $event , modelValue , text , $li ) {
// Enable or Disable
return true ; // enabled = true, disabled = false
} ]
] ;菜单上的菜单也可以定义为返回数组的函数。一个空数组将不会显示上下文菜单。
Right Click: {{item.name}}
"> < 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
} ]
] ;
} ; 事件
每当上下文菜单打开或关闭时，您都可以收听一些事件
context-menu-opening - 在最初打开上下文菜单之前触发context-menu-opened - 触发每当任何上下文菜单完全打开时context-menu-closed - 触发任何上下文菜单时context-menu-all-closed - 触发所有上下文菜单均已关闭
样本使用
$scope . $on ( '' , function ( event , args ) {
args . context ; // The element this directive is attached to
args . params ; // Available only for context-menu-opened the params passed for the context menu
args . contextMenu ; // Available only for context-menu-opened and context-menu-closed. The $ul element of this context menu.
} )
模型属性（可选）
在未通过$itemScope （即不使用ngRepeat ）的引用的情况下，有一个model属性可以传递一个值。
Some item name here
"> < div context-menu =" menuOptions " model =" expression " > Some item name here div >
使用$范围评估该model作为表达式$scope.$eval并通过第三个参数。
$scope . menuOptions = [
[ function ( $itemScope , $event , modelValue ) {
return $itemScope . item . name ;
} , function ( $itemScope , $event , modelValue ) {
// Action
} , function ( $itemScope , $event , modelValue ) {
// Enable or Disable
return true ; // enabled = true, disabled = false
} ]
] ; 样式覆盖
将类angular-bootstrap-contextmenu添加到中，该上下文menu已附加到。
为了在菜单打开时添加下面的样式时给出较轻的深色残疾色调。
body > . angular-bootstrap-contextmenu . dropdown {
background-color : rgba ( 0 , 0 , 0 , 0.1 );
}
下载源码
通过命令行克隆项目:
git clone https://github.com/Templarian/ui.bootstrap.contextMenu.git