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