Bind function on key up in Angular

Question

I am a designer/front-end developer and have little to no experience with Angular, so I'm hoping to get some help here. I have the following html

<div class="dropdown">
<div class="options"></div>
  <div class="add">
    <i id="add-issue-plus" class="icon-plus" data-ng-click="addIssue($event)"></i>
    <input id="add-issue-field" data-ng-model="newIssueName" type="text" placeholder="Create a new issue"/>
  </div>
</div>

I would like to trigger the click event from the <i> element if the user presses enter while in the subsequent input. I wanted to do this the simplest way possible without writing a separate function. Anyone with Angular experience know of the best way to do this? I know I could easily use jQuery and do something like:

$('#add-issue-field').keypress(function(e){
   var key = e.which;
   if (key === 13) {
      $('#add-issue-plus').click();
        return false;
  }
 });

But I was wondering if anyone had tips for a more efficient method.

Possible duplicate of http://stackoverflow.com/questions/17470790/how-to-use-a-keypress-event-in-angularjs — Arg0n, Dec 02 '15 at 21:06

score 2 · Accepted Answer · answered Dec 02 '15 at 21:13

The best use for this is a directive. Here is an example.

app.directive('checkKey', function() {
    return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
            elem.bind('keyup', function(event) {
                if (event.keyCode === 13) {
                    event.preventDefault();
                    return false;
                }
            });
        }
    }
});

And then add the directive to your input element

<input type="text" checkkey />

score 1 · Answer 2 · answered Dec 02 '15 at 21:18

I think you are pretty close in your thinking. There's a bit more of an angular-centric way to do this though:

If you look on the #add-issue-plus element you'll see an attribute called data-ng-click, this is how you bind methods to elements in angular. To bind to a keypress you would use data-ng-keypress https://docs.angularjs.org/api/ng/directive/ngKeypress. Then find the controller where the addIssue method is and make a new method that does something similar to what your jQuery above does. Evaluate the key that was pressed and just directly call the addIssue method from above.

dummy html:

<div class="options">
  <div class="add">
    <i id="add-issue-plus" class="icon-plus" data-ng-click="addIssue($event)"></i>
    <input id="add-issue-field" data-ng-keypress="onKeypress($event)" data-ng-model="newIssueName" type="text" placeholder="Create a new issue"/>
  </div>
</div>

...and then somewhere in the angular controller:

$scope.onKeypress = function(event) {
  var key = e.which;
  if (key === 13) $scope.addIssue(event);
};

score 0 · Answer 3 · answered Dec 02 '15 at 21:57

I have written on this exact directive in the past. You can even create a directive that accepts a key-code and an event making your directive more useable as well.

angular.module("myApp").directive('dlKeyCode', dlKeyCode);

  function dlKeyCode() {
    return {
      restrict: 'A',
      link: function($scope, $element, $attrs) {
        $element.bind("keypress", function(event) {
          var keyCode = event.which || event.keyCode;

          if (keyCode == $attrs.code) {
            $scope.$apply(function() {
              $scope.$eval($attrs.dlKeyCode, {$event: event});
            });

          }
        });
      }
    };
  }

In your HTML you can then do:

<div class="form">
    <input type="text" code="13" dl-key-code="closeModalWindow();" />
    <input type="text" code="24" dl-key-code="submitInformation();" />
</div>

Bind function on key up in Angular

3 Answers3

Linked