注射DOM元素AngularJS

我有一個<ul>作爲這種具有<li>的：注射DOM元素AngularJS

<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具有相同的功能來處理父容器中的重複列表項目。所以我不確定是否注入上面描述的上下文菜單是一個聰明的想法，因爲它會生成上下文菜單的非重複的重複。

謝謝。

來源

2015-01-10 user1027620

不會很難有插入體內偵聽鼠標位置和項目'x'的$ rootscope廣播一個ContextMenu指令。將另一個指令綁定到具有'contextmenu'事件處理程序的重複元素，並且廣播 – charlietfl

@charlietfl您能向我展示一個示例嗎？謝謝。 – user1027620

你可以使用已經可用的開源的contextmenu指令，或者你可以自己創建一個。檢查了這一點https://github.com/ianwalter/ng-context-menu，https://github.com/Wildhoney/ngContextMenu – PSL

下面是一組context菜單指令的一個非常基本的例子，其中菜單在主體中插入一次。

一個指令用於綁定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>

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

來源

2015-01-10 23:44:52 charlietfl

驚人的答案..我給它一個嘗試，但請注意，我沒有激活contextmenu右鍵單擊，但與Hammer.js刷卡事件。這如何適應？ – user1027620

不知道錘子，但如果它將事件處理程序綁定到元素將與我使用'綁定'的方式相同的原則 – charlietfl

不直接回答問題，但讓我在正確的軌道上完成指令。謝謝！ – user1027620

注射DOM元素AngularJS

回答

相關問題