AngularJS call function from controller in Drag & Drop directive

Question

I have a directive to natively drag & drop with angularJS and it is working fine:

 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
    );
  }
 }
});

What I want to achieve now, it's every-time the user drop an element, I need to call a function witch is outside of my directive, inside the controllers.js within a separate controller. I know that it should occur somewhere in my 'dragEnd' event listener but I have no clue about how to do it. Thanks If you can guide me through this.

Answer 1

You want to link to the specific controller running your directive, so link the target to the directive in the html

In your html

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

In your directive scope

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

In your directive link (onDragEnd)

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