2

私は AngularJS を使用しています。入力用のテキスト ボックスと、その入力を使用して別の URL に移動する 2 つのボタンがあります。現在、私はそれらに ng-click を使用しています。これはボタンのクリックには問題なく機能しますが、タブでボタンに移動して を押しenterても何も起こりません。

オンラインの他の結果では、ng-submit の使用が提案されていますが、これはボタンではなくフォームのプロパティであるため (私が思うに)、2 つのボタンでは機能しません。

マウスとタブとEnterキーの両方で動作させる方法について何か提案はありますか?

ありがとう！

4

1 に答える 1

4

ソースから直接、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 では) ではスペースバーがクリック イベントとして表示されるようです。ちょっと面白い違いだと思っただけで、スペースバーと入力キーがマウスクリックイベントとしてログに記録されているのを見て驚きました。

于 2013-07-17T03:53:25.463 に答える