Come attivare ngClick a livello di programmazione

101

Voglio attivare ng-clickun elemento in fase di esecuzione come:

_ele.click();

O

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

Come si può fare?

— mulla.azzi
fonte

4

No, voglio conoscere il meccanismo attraverso il quale posso attivare manualmente il ng-click.

— mulla.azzi

182

La sintassi è la seguente:

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

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

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

Maggiori informazioni su Angular Extend qui .

Se stai usando vecchie versioni di angular , dovresti usare trigger invece di triggerHandler .

Se è necessario applicare l'arresto della propagazione, è possibile utilizzare questo metodo come segue:

<a id="myselector" ng-click="clickOnUpload(); $event.stopPropagation();">
  Something
</a>

— clopez
fonte

4

quale versione di angolare stai usando. triggerHandler sembra funzionare bene in 1.2.1: jsfiddle.net/t34z7

— Blago

13

per favore spiega perché $ (elem) .click () non funziona con Angular?

— Sergii Shevchyk

11

Se sei limitato a jqLite e non puoi usare un selettore, fallo invece: angular.element (document.querySelector ('# mySelector')). Trigger ('click');

— Daniel Nalbach

3

@DanielNalbach nelle attuali (e non così attuali) versioni Angular 1.2+, devi usare al triggerHandlerposto ditrigger

— yorch

1

Non sono così sicuro che funzioni ancora ... angularjs 1.6 sembra non funzionare con jquery completo

— George Mauer

83

angular.element(domElement).triggerHandler('click');

EDIT: Sembra che tu debba uscire dall'attuale ciclo $ apply (). Un modo per farlo è usare $ timeout ():

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

Vedi violino: http://jsfiddle.net/t34z7/

— Blago
fonte

2

anche questo non funziona, genera l'errore seguente Errore: [$ rootScope: inprog] errors.angularjs.org/1.2.14/$rootScope/inprog?p0=%24apply at Error (native)

— mulla.azzi

8

Probabilmente vorrai usare Angular's $timeoutpiuttosto che setTimeout, poiché $timeouteseguirà un $applyciclo per te se necessario. Inoltre rende il tuo codice più testabile poiché ngMock ti dà il pieno controllo su quando $timeoutvengono eseguiti i messaggi di posta elettronica . docs.angularjs.org/api/ng/service/$timeout

— WildlyInaccurate

2

In realtà dovrebbe essere $timeout(fn, 0, false);così che non invoca $ apply, no?

— Martin Probst

2

Questa dovrebbe essere la risposta accettata. triggerHandler funziona. trigger non è presente nella v1.2.25

— Howie

4

@deadManN $timeoutè un servizio e come tale deve essere iniettato in dipendenza prima di poterlo utilizzare docs.angularjs.org/api/ng/service/$timeout

— WildlyInaccurate

19

La seguente soluzione funziona per me:

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

invece di :

angular.element('#myselector').triggerHandler('click');

— jpmottin
fonte

@DotKu Forse sei già in una funzione $ scope come quando usi una funzione $ timeout? In altre parole, non puoi chiamare $ scope. $ Apply () in $ scope. $ Apply () ... Spero che questo ti possa aiutare.

— jpmottin

@jpmottin L'ho trovato, deve essere posizionato in $ timeout. Grazie

— Weijing Jay Lin

1

OMG, Angular totallt lo ha rovinato. Perché non possono imitare jQuery's$('#element').click()

— Jhourlad Estrella,

13

Nel caso in cui tutti lo vedano, ho aggiunto un'ulteriore risposta di duplicazione con una riga importante che non interromperà la propagazione dell'evento

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

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

— Ulteriore
fonte

Grazie! Questo ha finalmente funzionato per me nella 1.5.11 e con la piena dipendenza da jquery. $ timeout (function () {var el = document.getElementsByClassName ('fa-chevron-up'); angular.element (el) .trigger ('click');}, 0);

— Florida G.

9

L'uso del vecchio JavaScript ha funzionato per me:
document.querySelector('#elementName').click();

— charlchad
fonte

Si. Per me va bene. Grazie.

— ktaro

5

La soluzione migliore è utilizzare:

domElement.click()

Perché gli angular.element(domElement).triggerHandler('click')eventi di clic angularjs triggerHandler ( ) non si manifestano nella gerarchia DOM, ma quello sopra sì, proprio come un normale clic del mouse.

https://docs.angularjs.org/api/ng/function/angular.element

http://api.jquery.com/triggerhandler/

https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click

— Morten Holmgaard
fonte

4

Puoi fare mi piace

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

— Fizer Khan
fonte

Ottengo questo errore per questa soluzione nella mia app ng 1.5.3: la ricerca di elementi tramite selettori non è supportata da jqLite.

— Todd Hale

1

Esempio semplice:

HTML

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

JavaScript

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

Ciò che fa è cercare i pulsanti ided eseguire un'azione di clic. Ecco.

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

— Leniel Maccaferri
fonte

0

Questo codice non funzionerà (genera un errore quando si fa clic):

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

È necessario utilizzare querySelector come segue:

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

— Guillaume-Alexandre
fonte

0

Includere la seguente riga nel metodo in cui si desidera attivare l'evento clic

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

— Vinayak Shedgeri
fonte