关键角度绑定功能

我是一名设计师/前端开发人员，对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>元素触发click事件。我想以最简单的方式做到这一点，而无需编写单独的函数。有Angular经验的人都知道这样做的最佳方式？我知道我可以很容易地使用jQuery做类似：

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

但我想知道如果任何人有一个更有效的方法技巧。

来源

2015-12-02 JordanBarber

http://stackoverflow.com/questions/17470790/how-to-use-a-keypress-event-in-的可能的复制angularjs – Arg0n

对此的最佳使用是指令。这是一个例子。

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

来源

2015-12-02 21:13:27

精彩，效果很棒！ – JordanBarber

我认为你是在你的思维很接近。还有一点是以角度为中心的方式来做到这一点：

如果你看看＃add-issue-plus元素，你会看到一个名为data-ng-click的属性，这就是你如何将方法绑定到角中的元素。要绑定到按键，您可以使用data-ng-keypresshttps://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); 
};

来源

2015-12-02 21:18:58 Justin

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>

来源

2015-12-02 21:57:08

关键角度绑定功能

回答

相关问题