CODEWITHSUNDEEP
javascripthtmlangularjs
ssb
ssb

Reputation: 7502

Keypress in Angular-UI

I am running into some problems using the keypress as follows-

<div ng-controller="GBNController">
...
<input id="search-field" type="text" placeholder="JSON Query" ng-model="queryText" ui-keypress="{enter: foo()}"/>
...
</div>

and my javascript has -

var AngApp = angular.module('gbn', ['ui']);
var GBNController = function($scope) {
    $scope.queryText = '';
    $scope.foo = function() {
        alert('test');
    }
};

Now this function foo is called only when the document is loaded and then after that, the return keypress event in the text field is never handled.

I am using the current head of the master branch.

Am I doing something wrong here, or is this broken??

Upvotes: 2

Views: 13588

Answers (2)

Andrew Joslin
Andrew Joslin

Reputation: 43023

You need to put foo() in quotes.

<input ui-keypress="{enter: 'foo()'}">

Upvotes: 7

Ben Lesh
Ben Lesh

Reputation: 108471

You could easily just roll your own keypress directive

Here's a plunker to demo

And the code:

app.directive('zKeypress', function(){
  return {
    restrict: 'A',
    link: function(scope, elem, attr, ctrl) {
      elem.bind('keypress', function(){
        scope.$apply(function(s) {
          s.$eval(attr.zKeypress);
        });
      });
    }
  };
});

HTML

<input type="text" z-keypress="foo()"/>

Upvotes: 2

Related Questions