使用指令注入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>

我想在某个事件中注入如下所示的上下文菜单（上述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具有相同的功能来处理父容器中的重复列表项。 因此，我不确定如上所述注入上下文菜单是否明智，因为这会生成上下文菜单的非种子重复。

谢谢。

Answer 1

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

一个指令用于绑定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])
      }
    }
  }
});

当用户在菜单外单击时，将需要一些其他文档侦听器来关闭菜单。 这里的目标是创建能够显示菜单和传递数据的基本机制。

我没有看过，但是可能已经有一些开源指令比这更先进。

DEMO