angularjs - Listening to the focus event in angular using $on -

i using swiper widget idangero, allows me pagify form. however, since loads controls front, possible tab field on next page. want prevent , have found jsfiddle changes page when tabbing.

it, however, uses regular javascript listen focus event $('form')[0].addeventlistener('focus'... want convert more angular version using $rootscope.$on (i want blur out of field instead of changing page, think can handle that) know how this?

i'd rather not use ng-focus directive because have add controls @ bottom , top of every page.

general answer angular events

$rootscope.$on not used element events - events broadcast within scope, using $rootscope.$boradcast or $rootscope.$emit.

if want listen focus event on element, can use on() method in angular.element. identical equivalent jquery method:

angular.element(document).find('form').on('focus', function() {     // ... }); 

specific explanation form.onfocus

in specific case however, code using event capture (addeventlistener('focus, function() {}, true)'), rather bubbling (see this answer more info). required because form elements not have own focus event, input elements do, not handle focus events bubbled inputs.

unfortunately jquery (and hence angular) supports event bubbling (as explained in this answer , this one). further issue jqlite built in angular not support delegated events, full jquery does.

this means options either:

1. add full jquery page can use delegated event:

   $('form').on('focus', ':input', function() {     // }); 

2. use vanilla javascript addeventlistener usecapture now:

   $('form')[0].addeventlistener('focus', function() {     // }, true); 

the $('form') code suggests have full jquery installed, options 1 should work you.