web-dev-qa-db-fra.com

Comment déclencher ngClick par programme

Je veux déclencher ng-click d'un élément à l'exécution comme:

_ele.click();

OR

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

Comment cela peut-il être fait?

javascriptjqueryangularjsangularjs-ng-click
93
mulla.azzi

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'infos sur Angular Extend way here .

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

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

<a id="myselector" ng-click="clickOnUpload(); $event.stopPropagation();">
  Something
</a>
173
clopez
angular.element(domElement).triggerHandler('click');

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

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

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

81
Blago

Cette solution suivante fonctionne pour moi: 

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

au lieu de :

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

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 brisera pas la propagation d'événements

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

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

Tu peux faire comme

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

La meilleure solution consiste à utiliser:

domElement.click()

Parce que les événements de clic angularjs triggerHandler (angular.element(domElement).triggerHandler('click')) ne sont pas affichés dans la hiérarchie DOM, contrairement à ceux décrits ci-dessus - 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

4
Morten Holmgaard

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

Cela permet de rechercher le id du bouton et d'exécuter une action de clic. Voila.

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

1
Leniel Maccaferri

Incluez la ligne suivante dans votre méthode là où vous voulez déclencher un événement click

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

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');
});
0
Guillaume-Alexandre