Javascript 键上的绑定函数

我是一名设计师/前端开发人员，在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>

---

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

这最好的用法是指令。这里有一个例子

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

---

我认为你的想法非常接近。不过，还有一种以角度为中心的方法：

如果查看#add issue plus元素，您将看到一个名为

data ng click

的属性，这就是如何将方法绑定到元素的角度。要绑定到按键，可以使用

数据ng按键

。然后找到

addIssue

方法所在的控制器，并创建一个新方法，该方法执行与上面jQuery类似的操作。评估按下的键，直接从上面调用

addIssue

方法

虚拟html：

您甚至可以创建一个接受键代码和事件的指令，使您的指令更可用

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>

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

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

          }
        });
      }
    };
  }

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