Cómo activar ngClick mediante programación

101

Quiero activar ng-clickun elemento en tiempo de ejecución como:

_ele.click();

O

_ele.trigger('click', function());

¿Cómo se puede hacer esto?

mulla.azzi
fuente
4
No, quiero saber el mecanismo a través del cual puedo activar ng-click manualmente.
mulla.azzi

Respuestas:

182

La sintaxis es la siguiente:

function clickOnUpload() {
  $timeout(function() {
    angular.element('#myselector').triggerHandler('click');
  });
};

// Using Angular Extend
angular.extend($scope, {
  clickOnUpload: clickOnUpload
});

// OR Using scope directly
$scope.clickOnUpload = clickOnUpload;

Más información sobre la forma Angular Extend aquí .

Si está usando versiones antiguas de angular , debe usar trigger en lugar de triggerHandler .

Si necesita aplicar detener la propagación, puede utilizar este método de la siguiente manera:

<a id="myselector" ng-click="clickOnUpload(); $event.stopPropagation();">
  Something
</a>
clopez
fuente
4
qué versión de angular estás usando. triggerHandler parece funcionar bien en 1.2.1: jsfiddle.net/t34z7
Blago
13
Explique por qué $ (elem) .click () no funciona con Angular.
Sergii Shevchyk
11
Si está limitado a jqLite y no puede utilizar un selector, haga lo siguiente: angular.element (document.querySelector ('# mySelector')). Trigger ('click');
Daniel Nalbach
3
@DanielNalbach en las versiones angulares 1.2+ actuales (y no tan actuales), debe usar en triggerHandlerlugar detrigger
yorch
1
No estoy tan seguro de que esto todavía funcione ... angularjs 1.6 esto parece no estar funcionando con jquery completo
George Mauer
83
angular.element(domElement).triggerHandler('click');

EDITAR: Parece que tienes que salir del ciclo actual de $ apply (). Una forma de hacer esto es usando $ timeout ():

$timeout(function() {
    angular.element(domElement).triggerHandler('click');
}, 0);

Ver violín: http://jsfiddle.net/t34z7/

Blago
fuente
2
incluso esto no funciona, está arrojando el siguiente error Error: [$ rootScope: inprog] errors.angularjs.org/1.2.14/$rootScope/inprog?p0=%24apply at Error (native)
mulla.azzi
8
Probablemente desee usar Angular's en $timeoutlugar de setTimeout, ya $timeoutque ejecutará un $applyciclo para usted si es necesario. También hace que su código sea más comprobable, ya que ngMock le brinda control total sobre cuándo $timeoutse ejecutan los correos electrónicos . docs.angularjs.org/api/ng/service/$timeout
WildlyInaccurate
2
En realidad, esto debería ser $timeout(fn, 0, false);para que no invoque $ apply, ¿no?
Martin Probst
2
Esta debería ser la respuesta aceptada. triggerHandler funciona. disparador no en v1.2.25
Howie
4
@deadManN $timeoutes un servicio y, como tal, debe inyectarse en dependencia antes de poder usarlo. docs.angularjs.org/api/ng/service/$timeout
WildlyInaccurate
19

Esta siguiente solución funciona para mí:

angular.element(document.querySelector('#myselector')).click();

en vez de :

angular.element('#myselector').triggerHandler('click');
jpmottin
fuente
@DotKu ¿Quizás ya está en una función $ scope como cuando usa en una función $ timeout? En otras palabras, no puede llamar a $ scope. $ Apply () en $ scope. $ Apply () ... Espero que esto le ayude.
jpmottin
@jpmottin Lo encontré, debe colocarse en $ timeout. Gracias
Weijing Jay Lin
1
Dios mío, Angular totallt lo arruinó. ¿Por qué no pueden imitar a jQuery?$('#element').click()
Jhourlad Estrella
13

En caso de que todos lo vean, agregué una respuesta duplicada adicional con una línea importante que no interrumpirá la propagación del evento

$scope.clickOnUpload = function ($event) {    
    $event.stopPropagation(); // <-- this is important

    $timeout(function() {
        angular.element(domElement).trigger('click');
    }, 0);
};
Ulterior
fuente
¡Gracias! Esto finalmente funcionó para mí en 1.5.11 y la dependencia completa de jquery. $ timeout (function () {var el = document.getElementsByClassName ('fa-chevron-up'); angular.element (el) .trigger ('click');}, 0);
Florida G.
9

Usar JavaScript simple y antiguo funcionó para mí:
document.querySelector('#elementName').click();

Charlchad
fuente
Si. Funciona para mi. Gracias.
ktaro
4

Puedes hacer como

$timeout(function() {
   angular.element('#btn2').triggerHandler('click');
});
Fizer Khan
fuente
Recibo este error para esta solución en mi aplicación ng 1.5.3: jqLite no admite la búsqueda de elementos a través de selectores.
Todd Hale
1

Muestra simple:

HTML

<div id='player'>
    <div id="my-button" ng-click="someFuntion()">Someone</div>
</div>

JavaScript

$timeout(function() {
    angular.element('#my-button').triggerHandler('click');
}, 0);

Lo que hace es buscar los botones idy realizar una acción de clic. Voila.

Fuente: https://techiedan.com/angularjs-how-to-trigger-click/

Leniel Maccaferri
fuente
0

Este código no funcionará (arrojará un error al hacer clic):

$timeout(function() {
   angular.element('#btn2').triggerHandler('click');
});

Debe usar querySelector de la siguiente manera:

$timeout(function() {
   angular.element(document.querySelector('#btn2')).triggerHandler('click');
});
Guillaume-Alexandre
fuente
0

Incluya la siguiente línea en su método donde desea activar el evento de clic

angular.element('#btn_you_want_to_click_progmaticallt').triggerHandler('click');
});
Vinayak Shedgeri
fuente