javascript - AngularJS ng-click 触发两次

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>

控制器

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

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

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

score 29 · Accepted Answer

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

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

也许你两次包含了 Angular？如果您这样做，您将收到两个警报，如下所示：

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

score 17 · Accepted Answer

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

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

我通过$compile直接在插入的 DOM 而不是我的指令上使用来解决这个问题$element。

score 10 · Accepted Answer

使用同样的问题

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

fn 被调用了两次

使用按钮修复它：

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

score 9 · Accepted Answer

这可能很模糊，但我已经ng-click触发了两次，因为我运行了 BrowserSync，这会将我的输入镜像到我在另一个窗口中打开的选项卡中，从而使我的所有点击次数增加一倍。为了解决这个问题，我禁用了“ghostMode”：https ://www.browsersync.io/docs/options/

score 7 · Accepted Answer

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

我也在一个表单中，ngSubmit 的 AngularJS 文档指出：

警告：注意不要同时使用ngClick和ngSubmit处理程序导致“双重提交”。有关何时触发的详细讨论，请参阅表单指令文档。ngSubmit

score 7 · Accepted Answer

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

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

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

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

score 5 · Accepted Answer

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

这让 ng-click 为我触发了两次。

在此处输入图像描述

score 4 · Accepted Answer

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

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

.off{
   pointer-events:none;
}

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

score 3 · Accepted Answer

当我在循环中不小心为动态添加的元素调用 $compile 而不是一次时，我得到了它。只编译一次就消除了这种影响。

score 3 · Accepted Answer

您可能会使用 ng-submit 在表单容器内进行 ng-click。在这种情况下，将 type="button" 添加到所有使用 ng-click。

score 2 · Accepted Answer

面临同样的问题。发现他们正在使用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>

score 2 · Accepted Answer

我已将<button ng-click='clickHandler()'>更改为<a ng-click='clickHandler()'>现在事件只触发一次

score 1 · Accepted Answer

在我的 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);

score 1 · Accepted Answer

我有点傻，有这个：

<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 移动到标签元素，它按预期工作。

<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>

score 1 · Accepted Answer

这种情况可能是 Angular 中缺少 ngTouch 造成的。

加载 ngTouch 的事件，可能会出现 Angular 1.5.0 之前的 ngTouch 和 ngClick 的bug。它是由设备工具栏或移动设备上的桌面版 Chrome触发的 ngClick 引起的pointerup。mouseUp

score 1 · Accepted Answer

我也有这样的问题。

<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()">

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

score 1 · Accepted Answer

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

HTML

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

JAVASCRIPT

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

score 0 · Accepted Answer

我已经通过以下代码处理了它

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
}

score 0 · Accepted Answer

我的案例：我在我的自定义自定义角度复选框组件上使用了 ng-click 事件。因此，只需为自定义组件提供方法绑定就可以了。

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

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

javascript - AngularJS ng-click 触发两次

19 回答 19

我已经通过以下代码处理了它

Related

Reference