注射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

回答

相关问题