Javascript AngularJS ng单击发射两次

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

HTML

注册{data.EventName}
拯救

控制器

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

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

var-app=angular.module（'regApp'，['ui']）；
app.controller（'RegistrationCtrl'，函数（$scope，$http）{
$scope.PostRegistration=函数（）{
警报（'click'）；您提供的代码不会触发事件两次：

（单击
保存
）

可能您包含Angular两次？如果您这样做，您将收到两个警报，如下所示：

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

我还以一种形式和状态：

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

如果其他答案没有帮助，请确保在Batarang中禁用AngularJS评测（当然，如果已安装）

这让ng为我点了两次火

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

我使用ajax调用加载特定的表单布局，所以我需要使用
$compile
在插入的DOM上激活Angular。但是，我在指令
$element
上使用了
$compile
，该指令附带了一个控制器。结果显示这“包括”控制器启动两次，通过
ng单击
或
ng提交
触发两次

我通过直接在插入的DOM上使用
$compile
而不是我的指令
$element
解决了这个问题。当我在循环中多次意外地为动态添加的元素调用$compile时，我得到了它，而不是仅调用一次。仅编译一次就消除了这个影响。
如果有人有同样的问题：
这就是我的问题：

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

提交登录

type=“submit”
和
ng click=“login（）”
都触发了控制器中的login（）-方法

因此，只需使用type=submit或ng-click指令中的一个元素就可以互相包装，这可能会导致触发事件两次或更多次

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

.off{
   pointer-events:none;
}

并将其应用于对应于单击事件的元素。
这可能不太清楚，但我有两次触发了
ng click
，因为我运行了BrowserSync，这会将我的输入镜像到我在另一个窗口中打开的选项卡中，从而将所有单击次数加倍。为了解决此问题，我禁用了“ghostMode”：
使用

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



fn被呼叫了两次

使用按钮将其固定：

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

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

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

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

然后清空div并按如下方式重置其内容：

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

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

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

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

var entities=$（“#entitiesContainer”）；
var entity=“”
实体。追加（实体）；
var leftContainer=angular.element（document.getElementById（“entitiesContainer”）；
$compile（leftContainer）（$scope）；
也面临同样的问题。
发现他们使用的是1.4.5版本，我将它切换到最新的1.4.5版本，它就工作了



var-app=angular.module（'regApp'，[]）；
app.controller（'RegistrationCtrl'，['$scope'，'$http'，函数（$scope，$http）{
$scope.PostRegistration=函数（）{
警报（'click'）；//我已将更改为，现在事件只触发一次
我有点像个傻瓜，有以下几点：

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


紫水晶


click事件触发了两次。我将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>


紫水晶

这种情况可能是由于角度传感器中缺少ngTouch造成的

事件如果加载ngTouch，则Angular 1.5.0之前的ngTouch和ngClick可能会发生。这是由Chrome for Desktop中的设备工具栏或移动设备上的
pointerup和
mouseUp触发ngClick的结果。
我也遇到过类似的问题

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



是正确的，然后只调用一次。
我不知道发生这种情况的原因是什么，但我必须在JavaScript函数内部使用
event.stopPropagation（）；

HTML

您可能在使用ng submit的表单容器中有ng click。在这种情况下，请将type=“button”添加到所有使用ng click的表单中。
我已通过以下代码处理它
HTML:

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

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

之前：

之后：
是的。就是这样。（踢我自己）这个（无意中包括angular.js两次）如果模型属性是$watched，那么会造成各种破坏…这也很容易，取决于您的依赖库管道。我看不出上面代码之间的区别。您是如何包含Angular两次的？别忘了，jquery/Angular.element选择可以返回多个项，因此看起来像一个触发器的东西实际上可能是ea的触发器ch元素在集合中。@windchime，在第二小提琴中，angular包含在“框架和扩展”下，第二次包含在“外部资源”的结束括号中
<div>
    <ui>
        <li>
            <button class="Button" ng-disabled="self.desableSubmitButton" ng- 
            click="self.SubmitClick($event)">Submit</button>
        </li>
    </ui> 
</div>

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