使用 Directives 注入 DOM 元素 AngularJS

Injecting DOM elements AngularJS using Directives

本文关键字：元素 AngularJS DOM 注入 Directives 使用      更新时间：2023-09-26

我对<li>有一个这样的<ul>：

    <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 具有相同的函数来处理父容器中的重复列表项。所以我不确定如上所述注入上下文菜单是否是一个聪明的主意，因为它会生成上下文菜单的未播种重复。

谢谢。

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

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

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

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

演示

相关文章：