javascript - 如何通过单击或回车键使 AngularJS 链接可用

Question

我正在使用 AngularJS，我有一个用于输入的文本框和两个使用该输入转到不同 URL 的按钮。现在，我正在为他们使用 ng-click。这适用于单击按钮，但如果我选择按钮并按下enter，则不会发生任何事情。

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

关于如何让它同时使用鼠标和制表符并按 Enter 的任何建议？

谢谢！

Answer 1

直接从源头看，您似乎也可以使用 ng-keyup 并检查它是否是输入然后做您的业务，但我认为编写一个自定义指令，这样您就不必在视图定义中做所有额外的工作仍然让事情变得更容易。

这是 ng-click 等的来源。

/**
 * @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 中则不然。只是认为这是一种有趣的小区别，并且惊讶地看到空格键和输入键记录为鼠标单击事件。