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

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' 事件侦听器中的某处，但我不知道如何去做。谢谢如果你能指导我完成这个。

Answer 1

你想link到特定的控制器运行你的指令，所以link目标到html

中的指令

在你的html

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

在你的指令范围内

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

在你的指令中 link (onDragEnd)

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

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

AngularJS call function from controller in Drag & Drop directive

javascript

drag-and-drop

angularjs

angularjs-directive