Question

<ul>＆＃39;我有一个<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

使用Directives注入DOM元素AngularJS

1 个答案: