I'm using AngularJS, and I have a text box for input and two buttons that use that input to go to different URLs. Right now, I'm using ng-click for them. This works fine for clicking on the buttons, but if I tab to the buttons and press enter, nothing happens.

Other results online suggest using ng-submit, but that's a property of the form rather than the button (I think), so it wouldn't work with two buttons.

Any suggestions on how to get it working with both the mouse and with tabbing and pressing enter?

Thanks!

I'm using AngularJS, and I have a text box for input and two buttons that use that input to go to different URLs. Right now, I'm using ng-click for them. This works fine for clicking on the buttons, but if I tab to the buttons and press enter, nothing happens.

Other results online suggest using ng-submit, but that's a property of the form rather than the button (I think), so it wouldn't work with two buttons.

Any suggestions on how to get it working with both the mouse and with tabbing and pressing enter?

Thanks!

• javascript
• angularjs

• Sounds like a job for a custom directive (da daa da daa). You should be able to write up a directive wherein you bind to the events you're interested in on the element and you call some function (that is the "value" of your new "property/attribute") – shaunhusain Commented Jul 17, 2013 at 3:25

1 Answer 1

Straight from the source, it looks like you can also use ng-keyup and check if it's an enter then do your business, but I think writing a custom directive so you don't have to do all the extra legwork in the view definition will still make things easier.

Here's the source for ng-click etc.

/**
 * @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 piled 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/1.1.5/angular.js

Drew up a fiddle for ya based on the code above:

http://jsfiddle/Yd8rh/2/

The 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");
    }
});

The HTML

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

Learned a bit in doing this as always. It seems in Chrome and Firefox (at least on Ubuntu) the spacebar es through as a click event, this seems to be true of enter as well in Chrome but not in Firefox. Just thought it was a kind of interesting little difference and was surprised to see the space bar and enter keys logging as mouse click events.