Question

我想为我的项目编写一个contextmenu指令。首先创建一个示例上下文菜单作为角度JS指令：

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

myApp.directive("myContextMenu", function(){
  restrict: 'AE',
  replace: true,
  template: "",
  link: (scope, elem, attrs) ->
    elem.bind "contextmenu", ->
      scope.$apply ->
        console.log "Right click to an item."
    elem.bind "mouseleave", ->
    elem.bind 'mouseover', ->
      elem.css('cursor', 'pointer');
});

以下是我的示例HTML文件：

<div ng-app>
  <div my-context-menu>
    Right click to display a context-menu
  </div>
</div>

当我右键单击文本时，我想附加一些div（例如示例上下文菜单）。当鼠标离开div时，我希望删除示例上下文菜单。

什么是正确的方法。我应该填写指令的“模板”字段吗？我应该隐藏并显示上下文菜单吗？或者我应该添加和删除上下文菜单吗？

对此有何帮助表示赞赏？

问候。

Answer 1

看看这个项目https://github.com/ianwalter/ng-context-menu

在我看来，重要的是你如何定义上下文菜单以及考虑它是ng-repeat的好例子（这样你就必须多考虑范围）

我认为内联定义菜单会很干净

即

<my-context-menu>
    <ul>
      <li>
        <a ng-click="f()">Option 1</a>
      </li>
     <li>
        <a ng-click="f()">Option 2</a>
      </li>
  </ul>
</my-context-menu>

这种方式指令只关注菜单的显示方式以及内联定义的内容，您可以轻松调用当前范围内的函数

我发现显示/隐藏div足够好 - 也许当你在页面中有大量项目而且不同的上下文菜单在运行中创建div会更合适

Answer 2

我会使用更通用的方法，并可以重复使用各种控制器。考虑用于向菜单添加项目的可配置选项。点击该项目可以调用哪些方法 - 使其也可以自定义。

上下文菜单的定位，如果菜单在右上角显示并隐藏在窗口内 - 在位置检测到将菜单向左移动。

你可以查看我写的那个 - https://github.com/shekhardesigner/Context-Menu-Angular-Directive

使用AngularJS编写ContextMenu的建议

2 个答案: