Angular中键上的绑定功能

Question

我是一名设计师/前端开发人员，几乎没有使用 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

我认为您的想法非常接近。不过，还有更多以角度为中心的方式来做到这一点：

如果您查看#add-issue-plus 元素，您会看到一个名为data-ng-click 的属性，这就是您将方法绑定到角度元素的方式。要绑定到按键，您将使用 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>

...然后在角度控制器的某个地方：

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