Angular+JQ+Bootstrap

by andytjoslin

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.0/angular-1.0.0.js"></script>
<div ng-controller="MyCtrl">
    {{count}}<br />
    <h5>Escape with onKeyup and an attr</h5>
    <input on-keyup="count = count + 1" key="27">
    <h5>Escape with custom onEscape</h5>
    <input on-escape="count = count + 1"> 
</div>

JavaScript

angular.module('myApp', []).directive('onKeyup', function() {
    return function(scope, elm, attrs) {
        elm.bind('keyup', function(evt) {
            if (!attrs.key || evt.which == +attrs.key) {
                scope.$apply(attrs.onKeyup);
            }
        });
    };
}).directive('onEscape', function() {
    return function(scope, elm, attrs) {
        elm.bind('keyup', function(evt) {
            if (evt.which==27) {
                scope.$apply(attrs.onEscape);
            }
        });
    };
});

function MyCtrl($scope) {
    $scope.count = 0;
}