如何使点击或输入键可以使用AngularJS链接

Question

我正在使用AngularJS，我有一个输入文本框和两个使用该输入去按不同URL的按钮。现在，我正在使用ng-click。这适用于点击按钮，但如果我选择按钮并按enter，则什么也不会发生。

其他结果在线建议使用ng-submit，但这是表单的属性而不是按钮（我认为），所以它不能用于两个按钮。

有关如何使用鼠标和Tab键并按Enter键的任何建议？

谢谢！

Answer 1

从源头上看，它看起来像你也可以使用ng-keyup，并检查它是否是一个输入然后做你的生意，但我认为写一个自定义指令，所以你不必做所有额外的工作视图定义仍然会使事情变得更容易。

下面是源NG点击等

/** 
* @ngdoc directive 
* @name ng.directive:ngClick 
* 
* @description 
* The ngClick allows you to specify custom behavior when 
* element is clicked. 
* 
* @element ANY 
* @param {expression} ngClick {@link guide/expression Expression} to evaluate upon 
* click. (Event object is available as `$event`) 
* 
* @example 
    <doc:example> 
    <doc:source> 
     <button ng-click="count = count + 1" ng-init="count=0"> 
     Increment 
     </button> 
     count: {{count}} 
    </doc:source> 
    <doc:scenario> 
     it('should check ng-click', function() { 
     expect(binding('count')).toBe('0'); 
     element('.doc-example-live :button').click(); 
     expect(binding('count')).toBe('1'); 
     }); 
    </doc:scenario> 
    </doc:example> 
*/ 
/* 
* A directive that allows creation of custom onclick handlers that are defined as angular 
* expressions and are compiled and executed within the current scope. 
* 
* Events that are handled via these handler are always configured not to propagate further. 
*/ 
var ngEventDirectives = {}; 
forEach(
    'click dblclick mousedown mouseup mouseover mouseout mousemove mouseenter mouseleave keydown keyup keypress'.split(' '), 
    function(name) { 
    var directiveName = directiveNormalize('ng-' + name); 
    ngEventDirectives[directiveName] = ['$parse', function($parse) { 
     return function(scope, element, attr) { 
     var fn = $parse(attr[directiveName]); 
     element.bind(lowercase(name), function(event) { 
      scope.$apply(function() { 
      fn(scope, {$event:event}); 
      }); 
     }); 
     }; 
    }]; 
    } 
); 

http://code.angularjs.org/1.1.5/angular.js

制定了基于上面的代码雅小提琴：

http://jsfiddle.net/Yd8rh/2/

的JavaScript

angular.module("myApp", []).directive("actionDirective", ['$parse', function($parse) { 
     return function(scope, element, attr) { 
     //grabbing the function from the attributes and parsing it (to get parameters I believe, this taken from the code above. 
     var fn = $parse(attr['actionDirective']); 

     //making the handler so it can be bound to different events without repeating again taken from source above 
     var handler = function(event) { 
      scope.$apply(function() { 
      fn(scope, {$event:event}); 
      } 
     )}; 

     //If clicked calling the handler 
     element.bind('click', handler); 
     //Checking first that it's the enter key "13" then calling the handler 
     element.bind('keyup', function(event) { if(event.keyCode==13) handler(event)}); 
     } 
}]).controller("MyCtrl", function($scope){ 
    $scope.somethingHappened = function() { 
     alert("something happened"); 
    } 
}); 

的HTML

<div ng-app="myApp" ng-controller="MyCtrl"> 
    <button action-directive="somethingHappened()">Test</button> 
</div> 

在一如既往这样了解了一些。 Chrome和Firefox（至少在Ubuntu上）似乎将空格作为点击事件发生，这似乎也适用于Chrome而不是Firefox。只是认为这是一种有趣的小差异，很惊讶地看到空格键并输入键记录为鼠标点击事件。