AngularJS ng-click fires twice

Question

I am using ng-click and it fires twice when I apply it to SPAN tag.

HTML

        
                      

              相关标签:
       
      

Answer 1

In case of somebody having the same issue: This was my problem:

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

Both, the type="submit" and the ng-click="login()"triggered the login()-method in my controller.

So just use either the type=submit or the ng-click directive

Answer 2

The code you've provided does not fire the event twice:

http://jsfiddle.net/kNL6E/ (click Save)

Perhaps you included Angular twice? If you do that, you'll get two alerts, demonstrated here:

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

Answer 3

I had a similar problem, but could not find where I included Angular twice in my files.

I was using an ajax calls to load specific form layouts, so I need to use $compile to activate Angular on the inserted DOM. However, I was using $compile on my directive $element which has a controller attached. Turns out this "includes" the controller twice, causing two triggers with ng-click or ng-submit.

I fixed this by using $compile directly on the inserted DOM instead of my directive $element.

Answer 4

was facing same issue. Find out they were using https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js version and i switch it to latest 1.4.5 version and it just worked.

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 5

I have changed <button ng-click='clickHandler()'> to <a ng-click='clickHandler()'> and now event fires only once

Answer 6

I've had the same issue when dynamically injecting partial views in my SPA(Single Page Applications).The way I solved it was to store the content of my div in a local variable like this:

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

Then empty out the div and reset its content like this:

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

Now you can add any additional html you have received from an AJAX call or dynamically constructed and lastly remember to re-compile your HTML to make it bound to 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);