Question

我有一个本地拖拽的指令使用angularJS下降并且工作正常：

 myDesigner.directive('draggable', function() {
 return function(scope, element) {
 // this gives us the native JS object
 var el = element[0];

 el.draggable = true;

 el.addEventListener(
   'dragstart',
   function(e) {
     e.dataTransfer.effectAllowed = 'move';
     e.dataTransfer.setData('Text', this.id);
     this.classList.add('drag');
     return false;
   },
   false
 );

 el.addEventListener(
   'dragend',
   function(e) {
     this.classList.remove('drag');
     var uiElement = $(e.target);
     console.log(uiElement);

     if(uiElement.attr('id') === 'design-navbar') {
       $(e.target).removeClass('k-item k-state-default k-first');
       $(e.target).children().removeClass('k-link k-state-hover');
       $(e.target).css('border', '1px solid black');
     }
     return false;
   },
   false
 );

 el.addEventListener(
   'click',
   function(e) {
     alert('clicked!');
     return false;
   },
   false
  );
 }
});

myDesigner.directive('droppable', function() {
return {
  scope: {
    drop: '&' // parent
  },
  link: function(scope, element) {
    // again we need the native object
    var el = element[0];

    el.addEventListener(
      'dragover',
      function(e) {
        e.dataTransfer.dropEffect = 'move';
        // allows us to drop
        if (e.preventDefault) e.preventDefault();
        this.classList.add('over');
        return false;
      },
      false
    );

    el.addEventListener(
      'dragenter',
      function(e) {
        this.classList.add('over');
        return false;
      },
      false
    );

    el.addEventListener(
      'dragleave',
       function(e) {
        this.classList.remove('over');
        return false;
      },
      false
    );

    el.addEventListener(
      'drop',
      function(e) {
        // Stops some browsers from redirecting.
        if (e.stopPropagation) e.stopPropagation();

        this.classList.remove('over');

        var item =      document.getElementById(e.dataTransfer.getData('Text'));
        this.appendChild(item);

        // call the drop passed drop function
        scope.$apply('drop()');

        return false;
      },
      false
    );
  }
 }
});

我现在想要实现的目标是，每次用户删除一个元素时，我需要在一个单独的控制器内的controllers.js内部调用一个函数，该函数在我的指令之外。我知道它应该出现在我的'dragEnd＆＃39;事件监听器，但我不知道如何做到这一点。谢谢你可以指导我完成这个。

Answer 1

您想链接到运行指令的特定控制器，因此将目标链接到html中的指令

在您的HTML中

<div droppable drop-result="dropped(arg1)"></div>

在指令范围内

scope: {
    dropResult: '&' // parent
}

在您的指令链接（onDragEnd）

中

link: function(scope, element, attrs) {
   ...
   scope.dropResult({arg1: someValue});
}

来自Drag＆amp; amp;控制器的AngularJS调用函数。 Drop指令

1 个答案: