tutorial ejemplos javascript angularjs

javascript - ejemplos - AngularJS ng-click dispara dos veces



angularjs tutorial (17)

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?



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


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.


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.


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>


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


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


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.


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.


Mismo problema usando

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

FN fue llamado dos veces

Usando un botón lo arregló:

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


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


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/


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 .


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


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>


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.


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.