web-dev-qa-db-fra.com

Comment enregistrer mes propres auditeurs d'événements dans AngularJS?

Comment enregistrer mes propres écouteurs d'événements dans une application AngularJS?

Pour être précis, j'essaie d'enregistrer les écouteurs Drag and Drop (DND) afin que lorsqu'un élément est glissé et déposé à un nouvel emplacement de ma vue, AngularJS recalcule la logique métier et met à jour le modèle, puis la vue.

angularjsjavascript-eventsdrag-and-drop
38
Tonte Pouncil

L'ajout d'un écouteur d'événements se ferait dans la méthode de liaison d'une directive. Ci-dessous, j'ai écrit quelques exemples de directives de base. CEPENDANT, si vous vouliez utiliser .draggable () et .droppable () de jquery-ui, ce que vous pouvez faire est de savoir que le paramètre elem dans la fonction link de chaque directive ci-dessous est en fait un objet jQuery. Vous pouvez donc appeler elem.draggable() et faire ce que vous allez y faire.

Voici un exemple de liaison dragstart dans Angular avec une directive:

app.directive('draggableThing', function(){ 
   return {
      restrict: 'A', //attribute only
      link: function(scope, elem, attr, ctrl) {
         elem.bind('dragstart', function(e) {
            //do something here.
         });
      }
   };
});

Voici comment vous utiliseriez cela.

<div draggable-thing>This is draggable.</div>

Un exemple de liaison de baisse à un div ou quelque chose avec Angular.

app.directive('droppableArea', function() {
   return {
       restrict: 'A',
       link: function(scope, elem, attr, ctrl) {
            elem.bind('drop', function(e) {
                /* do something here */
            });
       }
   };
});

Voici comment vous utiliseriez cela.

<div droppable-area>Drop stuff here</div>

J'espère que ça aide.

47
Ben Lesh

Masquer la gestion des événements et la manipulation dom dans une directive est à peu près la manière angularjs. La portée d'appel. $ S'applique lorsqu'un événement se déclenche indique angular pour mettre à jour la vue.

Vous pourriez envisager d'utiliser jquery-ui comme dans cet exemple (voir wiki angulaire d'exemples Je travaille avec le groupe angular-ui et il y a un simple wrapper d'événement que vous pourriez trouver utile.

8
Dan Doyon

Belle solution de Ben mais gardez à l'esprit que vous devrez accéder à originalEvent et à l'élément d'origine. Selon la documentation de Mozilla, deux conditions doivent être remplies https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations

  1. draggable est vrai
  2. Écouteur pour dragstart

Donc, la directive pourrait ressembler à ceci

app.directive('draggableThing', function () {
    return function(scope, element, attr) {
        var pureJsElement = element[0];
        pureJsElement.draggable = true;
        element.bind('dragstart', function(event) {
            event.originalEvent.dataTransfer.setData('text/plain', 
                              'This text may be dragged');
        //do something here.
        });
    }
});

Un bon exemple étape par étape est disponible ici http://blog.parkji.co.uk/2013/08/11/native-drag-and-drop-in-angularjs.html

3
zainengineer