angularjsdebuggingevent-handlingonloadangularjs-ng-touch

AngularJS ngTouch and ngSwipe throw error "TypeError: element.on is not a function"

I am using angular 1.4.0 and jQuery v1.11.1.

I am trying to use ngTouch/ngSwipe. Both will not stop throwing the error "TypeError: element.on is not a function" on app loading (inside the bind-function). Sadly I can't reproduce this error in a plunkr, anyhow ngSwipe runs into that issue, when:

    bind: function(element, eventHandlers, pointerTypes) {
       ...
    pointerTypes = pointerTypes || ['mouse', 'touch'];
    element.on(getEvents(pointerTypes, 'start'), function(event) {... <-- error here

I don't think this is too much an issue with my other code, but that I'm missing some kind of dependency. Anyone got an idea?

Thanks in advance.

Solution

  • The $on method is part of the angular.element object, whereas the on method is part of the jQuery object. The element in question is a DOM object, which has no such method. The closest equivalent would be:

    element.addEventListener(getEvents(pointerTypes, 'start'), function(event){} )

    or:

    $(element).on(getEvents(pointerTypes, 'start'), function(event){} )

    References