Как зарегистрировать моих собственных слушателей событий в AngularJS?

Как зарегистрировать собственные прослушиватели событий в приложении AngularJS?

Чтобы быть конкретным, я пытаюсь зарегистрировать прослушиватели Drag and Drop (DND), чтобы при перетаскивании и удалении чего-то в новом месте моего просмотра AngularJS пересчитывает бизнес-логику и обновляет модель, а затем представление.

Ответ 1

Добавление прослушивателя событий будет выполняться в методе связывания директивы. Ниже я написал несколько примеров основных указаний. ОДНАКО, если вы хотите использовать jquery-ui.draggable() и .droppable(), то вы можете знать, что параметр elem в функции link каждой директивы ниже - это фактически объект jQuery. Поэтому вы можете вызвать elem.draggable() и сделать то, что вы собираетесь делать там.

Вот пример привязки dragstart в Angular с директивой:

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

Здесь вы можете использовать это.

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

Пример привязки к div или что-то с Angular.

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

Здесь вы можете использовать это.

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

Я надеюсь, что это поможет.

Ответ 2

Скрытие обработки событий и манипуляции с домино в директиве в значительной степени является способом angularjs. Зона вызова. $Apply, когда событие срабатывает, сообщает angular обновить представление.

Вы можете использовать jquery-ui как в этом примере (см. angular вики примеров Я работаю с группой angular-ui, и есть простая обертка событий, которую вы можете найти полезной.

Ответ 3

Хорошее решение Ben, но имейте в виду, что вам нужно получить доступ к оригиналу и оригинальному элементу. Согласно документации Mozilla, два условия должны соответствовать https://developer.mozilla.org/en-US/docs/DragDrop/Drag_Operations

draggable true
Слушатель для dragstart

Таким образом, директива может выглядеть примерно так.

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

Хороший пошаговый пример доступен здесь http://blog.parkji.co.uk/2013/08/11/native-drag-and-drop-in-angularjs.html