Overview

The ngOn directive adds an event listener to a DOM element via angular.element().on(), and evaluates an expression when the event is fired. ngOn allows adding listeners for arbitrary events by including the event name in the attribute, e.g. ng-on-drop="onDrop()" executes the 'onDrop()' expression when the drop event is fired.

AngularJS provides specific directives for many events, such as ngClick, so in most cases it is not necessary to use ngOn. However, AngularJS does not support all events (e.g. the drop event in the example above), and new events might be introduced in later DOM standards.

Another use-case for ngOn is listening to custom events fired by custom elements.

Binding to camelCase properties

Since HTML attributes are case-insensitive, camelCase properties like myEvent must be escaped. AngularJS uses the underscore (_) in front of a character to indicate that it is uppercase, so myEvent must be written as ng-on-my_event="expression".