關鍵角度綁定功能

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>元素觸發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的屬性，這就是你如何將方法綁定到角中的元素。要綁定到按鍵，您可以使用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); 
}; 

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>