javascript - ejemplos - AngularJS ng-click dispara dos veces

angularjs tutorial

Question

Estoy usando ng-click y se dispara dos veces cuando lo aplico a la etiqueta 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>

CONTROLADOR

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

Solo debe disparar una vez. ¿Cómo puedo encontrar por qué sucede esto y cómo solucionarlo?

Answer 1

El código que has proporcionado no dispara el evento dos veces:

http://jsfiddle.net/kNL6E/ (haga clic en Save )

Tal vez incluyó Angular dos veces? Si haces eso, obtendrás dos alertas, demostradas aquí:

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

Answer 2

En caso de que alguien tenga el mismo problema: este fue mi problema:

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

Tanto el type="submit" como el ng-click="login()" activaron el método login () en mi controlador.

Solo use la directiva type = submit o ng-click

Answer 3

Es posible que tenga un clic ng dentro de un contenedor de formulario utilizando un ng-submit. En ese caso, agregue tipo = "botón" a todos sus ng-click usando.

Answer 4

Esta situación puede deberse a la falta de ngTouch en Angular.

Evento si se carga el ngTouch, se puede producir el bug en ngTouch y ngClick antes de Angular 1.5.0. El resultado es que ngClick se activó con el pointerup y el mouseUp en Chrome for Desktop en la barra de herramientas del dispositivo o dispositivo móvil.

Answer 5

Estaba enfrentando el mismo problema. Descubrí que estaban usando la versión https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js y la cambio a la última versión 1.4.5 y simplemente funcionó.

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 6

He cambiado <button ng-click = ''clickHandler ()''> a <a ng-click=''clickHandler()''> y ahora el evento se dispara solo una vez

Answer 7

He tenido el mismo problema al inyectar dinámicamente vistas parciales en mi SPA (aplicaciones de una sola página). La forma en que lo resolví fue almacenar el contenido de mi div en una variable local como esta:

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

Luego vacíe el div y reinicie su contenido de esta manera:

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

Ahora puede agregar cualquier html adicional que haya recibido de una llamada AJAX o de construcción dinámica y, por último, recuerde volver a compilar su HTML para que esté vinculado a un ángulo:

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 8

Lo obtuve cuando accidentalmente llamé a $ compile para los elementos agregados dinámicamente varias veces en el ciclo, en lugar de solo una vez. Compilando solo una vez eliminado este efecto.

Answer 9

Los elementos se envuelven entre sí, y esto puede provocar un evento de activación dos veces o más.

Así que usé un truco CSS simple para esta solución:

.off{
pointer-events:none;
}

y aplicarlo a un elemento correspondiente al evento click.

Answer 10

Mismo problema usando

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

FN fue llamado dos veces

Usando un botón lo arregló:

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

Answer 11

No sé cuál fue la razón por la que sucedió esto, pero tuve que usar event.stopPropagation(); Dentro de mi función de JavaScript.

HTML

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

JAVASCRIPT

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

Answer 12

Probablemente sea poco claro, pero tuve dos ng-click disparo porque tenía BrowserSync en ejecución, lo que reflejaría mis entradas en una pestaña que tenía abierta en otra ventana, duplicando así todos mis clics. Para resolverlo, deshabilité "ghostMode": https://www.browsersync.io/docs/options/

Answer 13

Resolví esto eliminando mi controlador ngsubmit ya que no lo necesito. Estoy monitoreando eventos de cambio y utilizando SignalR para actualizar la pantalla casi en tiempo real.

También estaba en un formulario y los documentos de AngularJS para ngSubmit declara:

Advertencia: tenga cuidado de no causar el "doble envío" utilizando los ngClick y ngSubmit juntos. Consulte la documentación de la directiva de formulario para una discusión detallada de cuándo se puede activar ngSubmit .

Answer 14

Si otras respuestas no ayudan, asegúrese de que el perfil de AngularJS esté deshabilitado en Batarang (si lo tiene instalado, por supuesto).

Esto estaba haciendo ng-click para disparar dos veces para mí.

Answer 15

Soy un poco tonto y tuve esto:

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

El evento clic se disparó dos veces. Moví el ng-click al elemento de etiqueta y está funcionando como se esperaba.

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

También tuve un problema como este.

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

No es así como se llama a ng-click, pero no se generaron errores y las llamadas de función aún funcionaron.

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

Es correcto y solo será llamado una vez.

Answer 17

Tuve un problema similar, pero no pude encontrar dónde incluí Angular dos veces en mis archivos.

Estaba usando llamadas ajax para cargar diseños de formularios específicos, por lo que necesito usar $compile para activar Angular en el DOM insertado. Sin embargo, estaba usando $compile en mi $element directiva que tiene un controlador adjunto. Resulta que esto "incluye" el controlador dos veces, causando dos disparos con ng-click o ng-submit .

Arreglé esto usando $compile directamente en el DOM insertado en lugar de mi $element directiva.