Tutorials

API Reference

Improve this doc View source

keyBinding

  1. - directive in module voorhoede.components.keyBindings

Binds keys to the lifecycle of the scope.

Directive Info

  • This directive executes at priority level 0.

Usage

  • as element: 
    <key-binding
    combo=""
    handler="">
...
</key-binding>

Arguments

Param Type Details
combo string

A key combo that will be passed to Mousetrap. List of supported keys
handler expression

Expression that will be evaluated as event handler. Available expression locals:

  • $event: The event object
  • $combo: The combo that triggered the event

Examples

Example

Using the n key globally in the app to create a new document, unless the currently focused element is editable (e.g., input, select)

index.html

<div ng-controller="AppCtrl as app">
    <key-binding combo="n" handler="app.createNewDocument()"></key-binding>
    <div class="form-group">
        <input class="form-control" type="text">
    </div>
    <div class="form-group">
        <textarea class="form-control"></textarea>
    </div>
</div>

index.js

angular.module('app', [
    'voorhoede.components.keyBindings'
])
    .controller('AppCtrl', function() {
        this.createNewDocument = function() {
            alert('Create new document');
        };
    });

Example

Using esc to close nested dropdown components, one at a time.

index.html

<dropdown-button label="Dropdown 1">
    <ul class="dropdown-menu">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li>
            <dropdown-button label="Dropdown 2">
                <ul class="dropdown-menu">
                    <li><a href="">Item 3</a></li>
                    <li><a href="">Item 4</a></li>
                    <li>
                        <dropdown-button label="Dropdown 3">
                            <ul class="dropdown-menu">
                                <li><a href="">Item 5</a></li>
                                <li><a href="">Item 6</a></li>
                            </ul>
                        </dropdown-button>
                    </li>
                </ul>
            </dropdown-button>
        </li>
    </ul>
</dropdown-button>

index.js

angular.module('app', [
    'components.dropdownButton'
]);

dropdownButton.html

<div class="dropdown">
    <button class="btn btn-default" ng-click="controller.toggle()">
        {{ label }}
        <span class="caret"></span>
    </button>
    <div ng-if="controller.isOpen">
        <key-binding combo="esc" handler="controller.toggle()"></key-binding>
    </div>
    <div ng-transclude ng-if="controller.isOpen" class="open"></div>
</div>

dropdownButton.js

angular.module('components.dropdownButton', [
    'voorhoede.components.keyBindings'
])
    .directive('dropdownButton', function() {
        return {
            restrict: 'E',
            scope: {'label': '@'},
            transclude: true,
            templateUrl: 'dropdownButton.html',
            controllerAs: 'controller',
            controller: function() {
                this.isOpen = false;
                this.toggle = function() {
                    this.isOpen = !this.isOpen;
                };
            }
        };
    });