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

Question

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.

Answer 1

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

• Angular Docs: type $rootScope.Scope: $on
• Angular Docs: $compile service: usage
• .on() | jQuery API Documentation
• AngularJS standard directive priority list
• Angular: Selectively compile templates