W3cubDocs

/Angular.js 1.7

Improve this Doc View Source ngOn

  1. directive in module ng

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".

Directive Info

  • This directive executes at priority level 0.

Usage

<ANY ng-on-eventname="expression">
</ANY>

or with uppercase letters in property (e.g. "eventName"):

<ANY ng-on-event_name="expression">
</ANY>

Examples

Bind to built-in DOM events

Bind to custom DOM events

© 2010–2018 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://code.angularjs.org/1.7.8/docs/api/ng/directive/ngOn