Question

我正在使用ng-click，当我将其应用于SPAN标记时会触发两次。

HTML

<div ng-app="regApp" ng-controller="RegistrationCtrl" data-ng-init="GetEventDetail()" ng-show="data.EventName">

    <h2>Registration for {{data.EventName}}</h2>
    <span class="btn" id="btnSave" ng-click="PostRegistration()">Save </span>

</div>

CONTROLLER

var app = angular.module('regApp', ['ui']);

app.controller('RegistrationCtrl', function ($scope, $http) {
    $scope.PostRegistration = function () {
    alert('click '); <--- fires twice
    /// some code here -- 
};

它应该只发射一次。我怎么能找到为什么会发生这种情况以及如何解决它？

Answer 1

您提供的代码不会触发事件两次：

http://jsfiddle.net/kNL6E/（点击Save）

也许你两次包括Angular？如果您这样做，您将收到两个警报，在此处演示：

http://jsfiddle.net/kNL6E/1/

Answer 2

我遇到了类似的问题，但无法找到我在文件中两次包含Angular的位置。

我使用ajax调用来加载特定的表单布局，因此我需要使用$compile来激活插入的DOM上的Angular。但是，我在我的指令$compile上使用了$element，它附加了一个控制器。原来这个“包括”控制器两次，导致两个触发器ng-click或ng-submit。

我通过直接在插入的DOM上使用$compile而不是我的指令$element来修复此问题。

Answer 3

这可能是模糊不清的，但我已经ng-click两次因为我运行了BrowserSync，这会将我的输入反映到我在另一个窗口中打开的标签中，从而使我的所有点击倍增。要解决这个问题，我禁用了“ghostMode”：https://www.browsersync.io/docs/options/

Answer 4

使用

的同样问题

<a ng-click="fn()"></a>

fn被叫了两次

使用固定的按钮：

<button ng-click="fn()"></button>

Answer 5

我通过删除我的ngsubmit处理程序解决了这个问题，因为我不需要它。我正在监视变更事件并使用SignalR近乎实时地更新屏幕。

我也处于一种形式和AngularJS docs for ngSubmit状态：

警告：小心不要同时使用ngClick和ngSubmit处理程序导致“双重提交”。有关何时可以触发ngSubmit的详细讨论，请参阅表单directive documentation。

Answer 6

如果有人遇到同样的问题：这是我的问题：

<a type="submit" ng-click="login()">submit login<a>

type="submit"和ng-click="login()"都触发了我的控制器中的login（）方法。

所以只需使用type = submit或ng-click指令

即可

Answer 7

如果其他答案没有帮助，请确保在Batarang中禁用AngularJS分析（如果您已经安装了它）。

这让我点击两次为我开火。

enter image description here

Answer 8

元素彼此包裹，这可能导致触发事件两次或更多次。

所以我在这个解决方案中使用了一个简单的CSS技巧：

Array

并将其应用于与click事件对应的元素。

Answer 9

当我意外地在循环中多次调用动态添加元素的$ compile时，我得到了它，而不仅仅是一次。只编译一次就删除了这个效果。

Answer 10

面临同样的问题。发现他们正在使用https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js版本，我将其切换到最新的1.4.5版本，它只是起作用。

https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js

var app = angular.module('regApp', []);

app.controller('RegistrationCtrl', ['$scope','$http',function($scope,$http ) {
  $scope.PostRegistration = function() {
    alert('click '); // <--- fires twice
    /// some code here -- 
  };
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="regApp" ng-controller="RegistrationCtrl">
  <h2 >Registration for {{data.EventName}}</h2>
  <span ng-click="PostRegistration()" class="btn" id="btnSave">Save </span>

</div>

Answer 11

我已将＆lt; button ng-click ='clickHandler（）'＆gt; 更改为＆lt; a ng-click ='clickHandler（）'＆gt; ，现在事件只发射一次

Answer 12

您可以使用ng-submit在表单容器中进行ng-click。在这种情况下，请为所有使用ng-click添加type =“button”。

Answer 13

在我的SPA（单页应用程序）中动态注入部分视图时，我遇到了同样的问题。我解决它的方法是将div的内容存储在本地变量中，如下所示：

var html = $("#leftContainer").html();

然后清空div并重置其内容，如下所示：

$("#leftContainer").empty();
$("#leftContainer").append(html);

现在您可以添加从AJAX调用中收到的任何其他html或动态构建的文件，最后记得重新编译HTML以使其绑定到angular：

var entities = $("#entitiesContainer");

var entity = "<div><a href='#' ng-click='Left(" + entityId + ")'>&nbsp;" + entityName + "</a><div>"
entities.append(entity);

var leftContainer = angular.element(document.getElementById("entitiesContainer"));

$compile(leftContainer)($scope);

Answer 14

我也有这样的问题。

<button style="width: 100%;" class="btn btn-danger" ng-click="'{{vm.delete()}}'">

这不是你如何调用ng-click，但没有抛出任何错误，函数调用仍然有效。

<button style="width: 100%;" class="btn btn-danger" ng-click="vm.delete()">

是正确的，然后只会被调用一次。

Answer 15

这种情况可能是因为缺少Angular中的ngTouch。

如果加载了ngTouch，则可能会出现Angular 1.5.0之前的ngTouch和ngClick中的bug。这是因为设备工具栏或移动设备上的Chrome for Desktop中的pointerup和mouseUp触发了ngClick。

Answer 16

我有点像个假人，有这个：

<li data-shape="amethyst" ng-click="toggleGem('amethyst')">
    <label></label>
    <i class="amethyst"></i>Amethyst
    <input type="checkbox" name="gem_type" id="gem-amethyst" value="amethyst" />
</li>

点击事件触发了两次。我将ng-click移动到label元素，它按预期工作。

<li data-shape="amethyst">
    <label ng-click="toggleGem('amethyst')"></label>
    <i class="amethyst"></i>Amethyst
    <input type="checkbox" name="gem_type" id="gem-amethyst" value="amethyst" />
</li>

Answer 17

我不知道发生这种情况的原因是什么，但我必须使用event.stopPropagation();内部的JavaScript函数。

HTML

<button class="button" ng-click="save($event)">Save</button>

JAVASCRIPT

function save(event) {
    event.stopPropagation();
}

Answer 18

我已通过以下代码对其进行了处理

HTML：

<div>
    <ui>
        <li>
            <button class="Button" ng-disabled="self.desableSubmitButton" ng- 
            click="self.SubmitClick($event)">Submit</button>
        </li>
    </ui> 
</div>

Angular 1.0控制器：

_self.SubmitClick = function(event){   
     _self.desableSubmitButton = true; //disable submit button
     event.preventDefault();
     event.stopPropagation();

     setTimeout(funtion() {
       _self.desableSubmitButton = false; //enable submit button after timeout
           if(_self.$scope.$$phase != '$apply' || _self.$scope.$$phase != '$digest'){
             _self.$scope.$digest();
             }
      }, 1000);//other Code logic
}

Answer 19

我的情况：我在自定义的自定义角度复选框组件上使用了 ng-click 事件。所以只需为自定义组件提供一个方法绑定就可以了。

之前： <mono-checkbox-ng ng-click="vm.onSelectAllClicked()">

之后： <mono-checkbox-ng on-changed="vm.onSelectAllClicked()">

AngularJS ng-click触发两次

19 个答案:

我已通过以下代码对其进行了处理