logo标签列表

AngularJS 中的“Fire”按钮点击

eventsbuttoninputangularjsclick
6
我希望在输入框中按下Enter键时触发按钮的点击事件，但是我发现在AngularJS中实现这一点很困难。
我的视图（简化、更新）如下：
<!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>

这个视图的控制器：

'use strict';

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

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

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

我将所有代码简化到了这个程度。当我点击btn2时，会出现以下错误:

$apply 已在进程中

不能直接调用$scope.onButton1Click()，必须模拟btn1的点击。

你写的吗？is app:click-watched="onButtonClick()" 这是一个自定义指令吗？ - ganaraj
是的，这是一个自定义指令。 - ali
你能把你的代码放进 Plunker 吗？ - ganaraj
我会尝试一下，这似乎是目前最好的想法，谢谢。 - ali
1
使用jQuery和Angular时要小心：https://dev59.com/YGUp5IYBdhLWcg3w3KXe#15012542 - Nick Heiner
显示剩余3条评论
3个回答
13

您提到了

在输入框内按下ENTER键时触发按钮的点击事件

所以，如果可以假定您有一个表单，我建议使用ng-submit，如下所示。

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

请注意按钮的类型应为submit。

3
这需要我一段时间才能理解（需要许多测试）。
创建一个表单并使用ng-submit触发事件（可能是函数）。
然后创建两个输入框（一个是“文本”，另一个是“提交”）。
然后按下回车键应触发ng-submit事件/函数。
HTML格式如下：<form id="nowsorting" ng-submit="getData(sc_user)">现在对<input type="text" ng-model="sc_user">的Soundcloud喜欢进行排序。<input type="submit" value="排序"></form>
1
我认为，你只需要调用$scope.onButtonClick()。
请查看this Plunker。
$scope.onKeyPress = function($event) {
   if ($event.keyCode == 13) {
      $scope.onButtonClick();
   }
};
1
这并不真正“点击”按钮，它只是执行与按钮点击相连的相同的javascript代码。稍有不同的是，任何其他的按钮点击监听器都不会被触发。 - Randyaa
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接