AngularJS 在拖放指令中从控制器调用函数答案

【问题标题】：AngularJS call function from controller in Drag & Drop directiveAngularJS 在拖放指令中从控制器调用函数
【发布时间】：2016-01-16 12:46:14
【问题描述】：

我有一个使用 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”事件监听器的某个地方，但我不知道如何去做。谢谢，如果你能指导我完成这个。

【问题讨论】：

标签： javascript angularjs angularjs-directive drag-and-drop

【解决方案1】：

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

在您的 html 中

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

在你的指令范围内

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

在您的指令链接中 (onDragEnd)

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

【讨论】：