Quero acionar ng-click
um elemento em tempo de execução como:
_ele.click();
OU
_ele.trigger('click', function());
Como isso pode ser feito?
Quero acionar ng-click
um elemento em tempo de execução como:
_ele.click();
OU
_ele.trigger('click', function());
Como isso pode ser feito?
Respostas:
A sintaxe é a seguinte:
function clickOnUpload() {
$timeout(function() {
angular.element('#myselector').triggerHandler('click');
});
};
// Using Angular Extend
angular.extend($scope, {
clickOnUpload: clickOnUpload
});
// OR Using scope directly
$scope.clickOnUpload = clickOnUpload;
Mais informações sobre a forma de extensão angular aqui .
Se você estiver usando versões antigas do angular , deve usar trigger em vez de triggerHandler .
Se precisar aplicar a propagação de parada, você pode usar este método da seguinte maneira:
<a id="myselector" ng-click="clickOnUpload(); $event.stopPropagation();">
Something
</a>
triggerHandler
vez detrigger
angular.element(domElement).triggerHandler('click');
EDIT: Parece que você tem que sair do ciclo atual de $ apply (). Uma maneira de fazer isso é usando $ timeout ():
$timeout(function() {
angular.element(domElement).triggerHandler('click');
}, 0);
Veja violino: http://jsfiddle.net/t34z7/
$timeout
vez de setTimeout
, pois $timeout
ele executará um $apply
ciclo para você, se necessário. Ele também torna seu código mais testável, pois o ngMock oferece controle total sobre quando os $timeout
s são executados. docs.angularjs.org/api/ng/service/$timeout
$timeout(fn, 0, false);
para que não invoque $ apply, não é?
$timeout
é um serviço e, como tal, precisa ser injetado na dependência antes de poder usá-lo docs.angularjs.org/api/ng/service/$timeout
Esta solução a seguir funciona para mim:
angular.element(document.querySelector('#myselector')).click();
ao invés de :
angular.element('#myselector').triggerHandler('click');
$('#element').click()
Para o caso de todos verem, adicionei uma resposta duplicada adicional com uma linha importante que não interromperá a propagação do evento
$scope.clickOnUpload = function ($event) {
$event.stopPropagation(); // <-- this is important
$timeout(function() {
angular.element(domElement).trigger('click');
}, 0);
};
A melhor solução é usar:
domElement.click()
Porque os angular.element(domElement).triggerHandler('click')
eventos de clique angularjs triggerHandler ( ) não aparecem na hierarquia DOM, mas o acima sim - como um clique normal do 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
Você pode fazer como
$timeout(function() {
angular.element('#btn2').triggerHandler('click');
});
Amostra simples:
HTML
<div id='player'>
<div id="my-button" ng-click="someFuntion()">Someone</div>
</div>
JavaScript
$timeout(function() {
angular.element('#my-button').triggerHandler('click');
}, 0);
O que isso faz é procurar o botão id
e executar uma ação de clique. Voila.
Fonte: https://techiedan.com/angularjs-how-to-trigger-click/
Este código não funcionará (emite um erro quando clicado):
$timeout(function() {
angular.element('#btn2').triggerHandler('click');
});
Você precisa usar o querySelector da seguinte maneira:
$timeout(function() {
angular.element(document.querySelector('#btn2')).triggerHandler('click');
});
Inclua a seguinte linha em seu método onde você deseja acionar o evento de clique
angular.element('#btn_you_want_to_click_progmaticallt').triggerHandler('click');
});