ng-on
<div ng-on="{ 'event-name': handlerFn }"></div>
Directive for Angular 1.x to easily bind custom (or not) events
Angular provides some useful directives for attaching event handlers easily:
ng-click="$ctrl.clickHandler()"
;ng-change="$ctrl.changeHandler($event)"
;ng-mouseenter="$ctrl.mouseenterHandler($event)"
etc.
But for custom events it's a tad more work, you need to set event listener on element yourself.
You might do something like this:
angular ;
or do something similar in controller and injected $element
.
this is fine for few bindings but gets tedious for setting up many events on many different elements.
Enter the angularisher way of doing this with ng-on
!
event-name
- name of event you want to listen to. Can be any event that element fires (also regularclick
,mouseenter
etc.);handlerFn
- a reference to function which is in components scope (i.e. controller of directive/component must expose this function). The function is called withevent
attribute.
Installation
npm i ng-on --save
angular.module('yourModule', ['argshook.ngOn'])
Examples
notice the use of component
no need for link
anymore:
angular ;
you can also define multiple event handlers (this time ng-on
value is in controller):
angular ;