Fire button click in AngularJS

2019-03-29 04:07发布

站内文章 / 后端开发
8 0 0

问题:

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.

回答1:

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.



回答2:

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.



回答3:

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

Please check this Plunker 

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


标签： events button input angularjs click
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~