Improve this Doc View Source ngOn
Improve this Doc View Source ngOn
- 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–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 3.0.
https://code.angularjs.org/1.8.2/docs/api/ng/directive/ngOn