javascript - 使用指令注入(inject) DOM 元素 AngularJS

Question

我有一个<ul>与<li>一样的:

    <li ng-repeat="x in xs" ng-class-odd="'x'" ng-class-even="'y'">
    // inject here
        <span>
            {{x.v}}
        </span>
    </li>

我想在某个事件上注入(inject)一个上下文菜单(如上所述的 DOM 位置)，如下所示:

        <ul id="context" class="col">
            <li class="three"><span>1</span></li>
            <li class="three"><span>2</span></li>
            <li class="three"><span>3</span></li>
        </ul>

实现这一点的最佳方法是什么？上面的1、2、3具有相同的功能来处理父容器中的重复列表项。因此，我不确定如上所述注入(inject)上下文菜单是否是一个明智的想法，因为它会生成上下文菜单的无种子重复。

谢谢。

Answer 1

这是一组上下文菜单指令的一个非常基本的示例，其中菜单在正文中插入一次。

一个指令用于绑定(bind) contenxtmenu 事件并将数据发送到控制菜单本身的指令。

所选项目和鼠标位置作为广播中的数据传递

HTML

  <ul>
    <li ng-repeat="item in items" context="item">{{item.title}}</li>
  </ul>

  <ul menu id="context" ng-show="menu_on">
    <li ng-click="itemAlert('id')">Alert ID</li>
    <li ng-click="itemAlert('title')">Alert Title</li>
  </ul>

JS

app.directive('context', function($rootScope) {
  return {
    restrict: 'A',
    scope: {
      item: '=context'
    },
    link: function(scope, elem) {
      elem.bind('contextmenu', function(evt) {
        evt.preventDefault();
        var data = {
          pos: { x: evt.clientX, y: evt.clientY},
          item: scope.item
        }
        scope.$apply(function(){
          $rootScope.$broadcast('menu', data);
        });

      });
    }
  }
})

 app.directive('menu', function($rootScope) {
  return {
    restrict: 'A',
    link: function(scope, elem) {
      scope.$on('menu', function(evt, data) {
        scope.menu_on = true;
        scope.item = data.item;
        var cssObj = {
          left: data.pos.x + 20 + 'px',
          top: data.pos.y - 40 + 'px'
        };
        elem.css(cssObj)
      });
      scope.itemAlert = function(prop) {
        scope.menu_on = false;
        alert(scope.item[prop])
      }
    }
  }
});

当用户单击菜单外部时，需要一些额外的文档监听器来关闭菜单。这里的目标只是创建能够显示菜单和传递数据的基 native 制。

我还没看过，但可能已经有一些比这高级得多的开源指令。

DEMO