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?
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í:
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 + ")''> " + 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
yngSubmit
juntos. Consulte la documentación de la directiva de formulario para una discusión detallada de cuándo se puede activarngSubmit
.
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.