Fire button click in AngularJS

Question

I want to fire a button's click event when pressing ENTER inside a input and I find it quite difficult with AngularJS.

My view (simplified, updated):

<!doctype html>
<html lang="en" ng:app="test">
    <head>
        <meta charset="utf-8" />
        <title>Test</title>
        <link rel="stylesheet" href="css/app.css" />
    </head>
    <body ng-controller="TestController">
        <button ng-click="onButton1Click()" class="btn1">Click Me</button>
        <button ng-click="onButton2Click()" class="btn2">Don't click me</button>
        <script src="lib/jquery/jquery.js"></script>
        <script src="lib/angular/angular.js"></script>
        <script src="js/testcontroller.js"></script>
    </body>
</html>

My controller for this view:

'use strict';

angular.module('test', [])
.controller('TestController', ['$scope',
    function($scope) {

        $scope.onButton1Click = function() {
            alert("Hello");
        }

        $scope.onButton2Click = function() {
            $('.btn2').click();
        }
}])

I simplified all the code to this. When I click on btn2 I get this error

$apply already in progress

No, I can't call $scope.onButton1Click() directly, I must simulate the btn1 click.

is app:click-watched="onButtonClick()" a custom directive you wrote? — ganaraj, Apr 18 '13 at 10:43
Have you looked at the plunker solution given below? What is wrong with that solution and why is that not acceptable to you ? Between you should not be accessing the DOM from within a controller in Angular... — ganaraj, Apr 19 '13 at 14:26
Be careful about using jQuery with Angular: http://stackoverflow.com/a/15012542/147601 — Nick Heiner, Apr 19 '13 at 21:22

score 13 · Answer 1 · answered Apr 19 '13 at 14:58

You mentioned

fire a button's click event when pressing ENTER inside a input

So if it is safe to assume that you can have a form I would prefer using ng-submit as shown below.

<form ng-submit="clickEventFunction()">
  <input type="text"/>
  <button type="submit">Click</button>
</form>

Note button type should be submit.

score 3 · Accepted Answer · answered Jun 10 '14 at 23:21

This took me a while to figure out (lots of fiddles).

<form id="nowsorting" ng-submit="getData(sc_user)">Now sorting the Soundcloud likes of <input type="text" ng-model="sc_user"><input type="submit" value="Sort"></form>

Make a form and use ng-submit to fire the event (likely a function).

Then create two inputs (one is "text" and the other "submit").

Then pushing enter should fire the ng-submit event/function.

score 1 · Answer 3 · edited May 30 '14 at 10:36

1

I think, you just have to call your $scope.onButtonClick()

Please check this Plunker

$scope.onKeyPress = function($event) {
   if ($event.keyCode == 13) {
      $scope.onButtonClick();
   }
};

edited May 30 '14 at 10:36

Christophe Roussy

16,299
4
85
85

answered Apr 18 '13 at 11:24

bfcamara

323
1
2
10

1

This doesn't really 'click' the button it just executes the same javascript code that is wired to the click of the button. it's slightly different since any additional listeners you have on that button click won't be triggered. – Randyaa May 13 '15 at 17:32

Fire button click in AngularJS

3 Answers3

Linked