绑定Angular中的关键功能 [英] Bind function on key up in Angular

问题描述

我是一名设计师/前端开发人员，对Angular有很少或没有经验，所以我希望能在这里得到一些帮助。我有以下html

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> / code>元素，如果用户在后续输入中按下Enter键。我想以最简单的方式做到这一点，而无需编写单独的函数。有Angular经验的人都知道这样做的最佳方式？我知道我可以很容易地使用jQuery并执行如下操作：



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.

推荐答案

这是一个指令。下面是一个例子。

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 />

这篇关于绑定Angular中的关键功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！