Comment déclencher ngClick par programmation

101

Je veux déclencher ng-clickun élément au moment de l'exécution comme:

_ele.click();

OU

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

Comment cela peut-il être fait?

mulla.azzi
la source
4
Non, je veux connaître le mécanisme par lequel je peux déclencher ng-click manuellement.
mulla.azzi

Réponses:

182

La syntaxe est la suivante:

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

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

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

Plus d'informations sur la manière Angular Extend ici .

Si vous utilisez d' anciennes versions d'angular , vous devez utiliser trigger au lieu de triggerHandler .

Si vous devez appliquer l'arrêt de la propagation, vous pouvez utiliser cette méthode comme suit:

<a id="myselector" ng-click="clickOnUpload(); $event.stopPropagation();">
  Something
</a>
clopez
la source
4
quelle version d'angular utilisez-vous. triggerHandler semble fonctionner correctement dans la version 1.2.1: jsfiddle.net/t34z7
Blago
13
veuillez expliquer pourquoi $ (elem) .click () ne fonctionne pas avec Angular?
Sergii Shevchyk
11
Si vous êtes limité à jqLite et que vous ne pouvez pas utiliser de sélecteur, faites-le à la place: angular.element (document.querySelector ('# mySelector')). Trigger ('click');
Daniel Nalbach du
3
@DanielNalbach dans les versions angulaires actuelles (et pas si actuelles) 1.2+, vous devez utiliser à la triggerHandlerplace detrigger
yorch
1
Je ne suis pas si sûr que cela fonctionne toujours ... angularjs 1.6 cela ne semble pas fonctionner avec jquery complet
George Mauer
83
angular.element(domElement).triggerHandler('click');

EDIT: Il semble que vous deviez sortir du cycle $ apply () actuel. Une façon de faire est d'utiliser $ timeout ():

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

Voir violon: http://jsfiddle.net/t34z7/

Blago
la source
2
même cela ne fonctionne pas, son erreur suivante de lancement Erreur: [$ rootScope: inprog] errors.angularjs.org/1.2.14/$rootScope/inprog?p0=%24apply at Error (native)
mulla.azzi
8
Vous voudrez probablement utiliser Angular $timeoutplutôt que setTimeout, car $timeoutcela exécutera un $applycycle pour vous si nécessaire. Cela rend également votre code plus testable car ngMock vous donne un contrôle total sur l' $timeoutexécution des s. docs.angularjs.org/api/ng/service/$timeout
WildlyInaccurate
2
En fait, cela devrait être fait $timeout(fn, 0, false);pour qu'il n'invoque pas $ apply, n'est-ce pas?
Martin Probst
2
Cela devrait être la réponse acceptée. triggerHandler fonctionne. le déclencheur ne fonctionne pas dans la v1.2.25
Howie
4
@deadManN $timeoutest un service et, en tant que tel, doit être injecté de dépendances avant de pouvoir l'utiliser docs.angularjs.org/api/ng/service/$timeout
WildlyInaccurate
19

Cette solution suivante fonctionne pour moi:

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

au lieu de :

angular.element('#myselector').triggerHandler('click');
jpmottin
la source
@DotKu Peut-être êtes-vous déjà dans une fonction $ scope comme lorsque vous l'utilisez dans une fonction $ timeout? En d'autres termes, vous ne pouvez pas appeler un $ scope. $ Apply () dans un $ scope. $ Apply () ... J'espère que cela vous aidera.
jpmottin
@jpmottin Je l'ai trouvé, il doit être placé dans $ timeout. Merci
Weijing Jay Lin
1
OMG, Angular ne l'a pas ruiné. Pourquoi ne peuvent-ils pas imiter jQuery's$('#element').click()
Jhourlad Estrella
13

Juste au cas où tout le monde le verrait, j'ai ajouté une réponse de duplication supplémentaire avec une ligne importante qui ne rompra pas la propagation des événements

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

    $timeout(function() {
        angular.element(domElement).trigger('click');
    }, 0);
};
Ultérieur
la source
Merci! Cela a finalement fonctionné pour moi dans la version 1.5.11 et la dépendance complète de jquery. $ timeout (function () {var el = document.getElementsByClassName ('fa-chevron-up'); angular.element (el) .trigger ('click');}, 0);
Florida G.
9

L'utilisation de l'ancien JavaScript a fonctionné pour moi:
document.querySelector('#elementName').click();

charlchad
la source
Ouais. Travaille pour moi. Merci.
ktaro
5

La meilleure solution est d'utiliser:

domElement.click()

Parce que les événements de clic triggerHandler ( angular.element(domElement).triggerHandler('click')) angularjs ne bouillonnent pas dans la hiérarchie DOM, mais celui ci-dessus le fait - tout comme un clic de souris normal.

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
la source
4

Tu peux faire comme

$timeout(function() {
   angular.element('#btn2').triggerHandler('click');
});
Fizer Khan
la source
J'obtiens cette erreur pour cette solution dans mon application ng 1.5.3: la recherche d'éléments via des sélecteurs n'est pas prise en charge par jqLite.
Todd Hale
1

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

Ce que cela fait, c'est rechercher le bouton id et d'effectuer une action de clic. Voila.

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

Leniel Maccaferri
la source
0

Ce code ne fonctionnera pas (génère une erreur lorsque vous cliquez dessus):

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

Vous devez utiliser le querySelector comme suit:

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

Incluez la ligne suivante dans votre méthode là où vous souhaitez déclencher l'événement de clic

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