angular-trap-all disallows tabbing out of a specified area. It's useful when implementing modal dialogs to prevent the user from interacting with what's behind a modal mask by simply tabbing out of the dialog.
This is similar to jQuery trap input, but an angular version. It works for all accessible form elements inside a modal dialog, including select tag.
via Bower
bower install angular-trap-all --save
- Include Angular-trap-all.js in your application after Angular.
<script src="bower_components/angular-trap-all/angular-trap-all.js"></script>
- Inject it in your module as dependency.
angular.module('myModule', [
'gui.trapAll'
]);- Then use as either element or attribute type directive.
<trap-all></trap-all> or <div trap-all></div>
- And ofcourse specify trap start and end points in HTML, using data-trap attribute.
<trap-all>
<div class="modal-header">
<button class="modal-header-close icon icon-size-sm icon-cross" ng-click="vm.closePopup()" data-trap="start" aria-label="Hit enter to close popup">
</button>
<span class="modal-header-title" ng-cloack>{{vm.popupTitle}}</span>
</div>
<div class="modal-body" ng-transclude>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-faint" ng-click="vm.closePopup()" aria-label="Hit enter to close popup">
Close
</button>
<button type="button" class="btn btn-hero" data-trap="end" aria-label="Hit enter to save changes">Save changes</button>
</div>
</trap-all>MIT