在 Angular 中的键上绑定函数

Question

我是一名 designer/front-end 开发人员，对 Angular 几乎没有经验，所以我希望能在这里得到一些帮助。我有以下 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> 元素触发点击事件。我想以最简单的方式做到这一点，而无需编写单独的函数。有 Angular 经验的人知道最好的方法吗？我知道我可以轻松使用 jQuery 并执行类似的操作：

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

但我想知道是否有人提供更有效方法的提示。

Answer 1

最好的用途是指令。这是一个例子。

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;
                }
            });
        }
    }
});

然后将指令添加到您的输入元素

<input type="text" checkkey />

Answer 2

我觉得你的想法很接近。不过，还有更多以 angular 为中心的方式来做到这一点：

如果您查看 #add-issue-plus 元素，您会看到一个名为 data-ng-click 的属性，这就是将方法绑定到 angular 中元素的方式。要绑定到按键，您可以使用 data-ng-keypress https://docs.angularjs.org/api/ng/directive/ngKeypress。然后找到 addIssue 方法所在的控制器，并创建一个新方法来执行类似于上面 jQuery 所做的事情。评估按下的键并直接从上面调用 addIssue 方法。

虚拟 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>

...然后在 angular 控制器的某处：

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

Answer 3

I have written on this exact directive in the past. 您甚至可以创建一个接受键码和事件的指令，从而使您的指令也更有用。

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});
            });

          }
        });
      }
    };
  }

在您的 HTML 中，您可以执行以下操作：

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

在 Angular 中的键上绑定函数

Bind function on key up in Angular

html

javascript

jquery

angularjs

angularjs-directive