Question

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

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

有关如何使用鼠标和使用Tab键并按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

根据上面的代码为ya画一个小提琴：

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中输入。只是觉得这是一种有趣的小差异，并且惊讶地看到空格键并输入键记录为鼠标点击事件。

如何使用click或Enter键使AngularJS链接可用

1 个答案: