ui.bootstrap.contextMenu

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 – 一个字符串字面包含要添加到上下文菜单的自定义类（<ul>元素）
• allow-event-propagation （默认值：false）一个布尔值确定是否允许事件传播。请注意，如果您将其设置为True，并且不要使用其他内容来捕捉，则浏览器的上下文菜单将显示在此库上下文菜单的顶部。
• model – （请参见下面的模型属性）
• close-menu-on （默认值：'）字符串字面包含用于触发菜单关闭操作的事件。

看法

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

• 或者

 < 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 ) ;
    } ]
] ; 

菜单选项

菜单选项传递给上下文 – 可能是：

• 一个包含对象的数组来表示上下文菜单中的每个项目
• 返回对象数组的功能（如上）
• 承诺返回对象或函数数组（如上）

新实施

每个菜单选项都由包含以下属性的对象表示：

传统实施（仍然受支持，但不会再更新）

每个菜单选项都有一个带有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
    } ]
] ;

菜单上的菜单也可以定义为返回数组的函数。一个空数组将不会显示上下文菜单。

 < 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 ( \'<event_name_here>\' , 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属性可以传递一个值。

 < 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添加到<div>中，该上下文menu已附加到。

为了在菜单打开时添加下面的样式时给出较轻的深色残疾色调。

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