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>

如果用户在后续输入中按Enter键，我想从<i>元素触发click事件。我想以最简单的方式做到这一点，而无需编写单独的函数。任何有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的属性，这就是将方法绑定到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>

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

$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

3 个答案: