Come attivare un evento in AgularJS come in jQuery?

Question

E 'possibile fare qualcosa come $("#container").trigger("click"); usando solo AngularJS? E se non è possibile per trigger, c'è un altro modo per gestire questo comportamento?

Ho un esempio di base che crea una casella su un clic del pulsante. La casella creata è trascinabile. Ora, attualmente l'utente deve fare clic sul pulsante (per creare la casella) e fare nuovamente clic per trascinare la casella. Vorrei che l'utente facesse semplicemente clic una volta: per creare la casella e quindi attivare l'evento di trascinamento della casella in modo che l'utente non debba fare di nuovo clic.

var app = angular.module("app", []); 

// This directive is attached to the button and makes it create a box every time the is a 'mousedown' event 
app.directive("boxCreator", function($document, $compile) { 
    return { 
     restrict: 'A', 
     link: function($scope, $element, $attrs) { 
      $element.bind("mousedown", function($event) { 
       var newNode = $compile('<div class="box" drag></div>')($scope); 

       newNode.css({ 
        top: $event.pageY - 25 + "px", 
        left: $event.pageX - 25 + "px" 
        }); 

       angular.element($document[0].body).append(newNode); 
       // I'd like to do something like : '$(newNode).trigger("mousedown");' 
      }); 
     } 
    } 
}); 

// Makes the binded element draggable 
app.directive("drag", function($document) { 
    return function(scope, element, attr) { 
     var startX = 0, startY = 0, x = event.pageX - 25, y = event.pageY - 25; 

     element.css({ 
     position: 'absolute', 
     cursor: 'pointer' 
     }); 

     element.on('mousedown', function(event) { 
      event.preventDefault(); 
      startX = event.pageX - x; 
      startY = event.pageY - y; 
      $document.on('mousemove', mousemove); 
      $document.on('mouseup', mouseup); 
     }); 

     function mousemove(event) { 
      y = event.pageY - startY; 
      x = event.pageX - startX; 
      element.css({ 
      top: y + 'px', 
      left: x + 'px' 
      }); 
     } 

     function mouseup() { 
      $document.off('mousemove', mousemove); 
      $document.off('mouseup', mouseup); 
     } 
     }; 
    }); 

JSFIDDLE

Answer 1

La documentazione che si desidera guardare è angular.element, che è l'implementazione di JQLite angolare.

Si può vedere da ciò che esiste un metodo .triggerHandler().

Quindi qualcosa di simile:

angular.element(newNode).triggerHandler('mousedown'); 

attiverà il gestore. L'unica cosa è che questo non include nessuno dei dati dell'evento, quindi dovrai anche rimuovere la dipendenza su event.pageY. Ho fatto questo crudamente modificando queste due righe:

startX = (event.pageX - x) || 0; 
startY = (event.pageY - y) || 0; 

Si potrebbe anche guardare in params di passaggio, ma non ho potuto ottenere quello per funzionare affatto.

Speriamo che questo ti possa iniziare.

Updated fiddle

Answer 2

È possibile utilizzare un triggerHandler e trasmettere i dati degli eventi personalizzati.

element.triggerHandler({ 
    type: 'mousedown', 
    pageX: 0, 
    pageY: 0 
});