Ich möchte zur ng-click
Laufzeit ein Element auslösen wie:
_ele.click();
ODER
_ele.trigger('click', function());
Wie kann das gemacht werden?
Ich möchte zur ng-click
Laufzeit ein Element auslösen wie:
_ele.click();
ODER
_ele.trigger('click', function());
Wie kann das gemacht werden?
Antworten:
Die Syntax lautet wie folgt:
function clickOnUpload() {
$timeout(function() {
angular.element('#myselector').triggerHandler('click');
});
};
// Using Angular Extend
angular.extend($scope, {
clickOnUpload: clickOnUpload
});
// OR Using scope directly
$scope.clickOnUpload = clickOnUpload;
Weitere Infos zum Angular Extend Weg hier .
Wenn Sie alte Versionen von Angular verwenden , sollten Sie Trigger anstelle von TriggerHandler verwenden .
Wenn Sie die Stop-Propagierung anwenden müssen, können Sie diese Methode wie folgt verwenden:
<a id="myselector" ng-click="clickOnUpload(); $event.stopPropagation();">
Something
</a>
triggerHandler
anstelle vontrigger
angular.element(domElement).triggerHandler('click');
EDIT: Es scheint, dass Sie aus dem aktuellen $ apply () -Zyklus ausbrechen müssen. Eine Möglichkeit, dies zu tun, ist die Verwendung von $ timeout ():
$timeout(function() {
angular.element(domElement).triggerHandler('click');
}, 0);
Siehe Geige: http://jsfiddle.net/t34z7/
$timeout
eher Angulars als verwenden setTimeout
, da bei Bedarf $timeout
ein $apply
Zyklus für Sie ausgeführt wird. Es macht Ihren Code auch testbarer, da Sie mit ngMock die volle Kontrolle darüber haben, wann $timeout
s ausgeführt werden. docs.angularjs.org/api/ng/service/$timeout
$timeout(fn, 0, false);
so sein, dass es $ apply nicht aufruft, nicht wahr?
$timeout
ist ein Dienst und muss als solcher in Abhängigkeit injiziert werden, bevor Sie ihn verwenden können. docs.angularjs.org/api/ng/service/$timeout
Diese folgende Lösung funktioniert für mich:
angular.element(document.querySelector('#myselector')).click();
anstatt :
angular.element('#myselector').triggerHandler('click');
$('#element').click()
Nur für den Fall, dass es jeder sieht, habe ich eine zusätzliche doppelte Antwort mit einer wichtigen Zeile hinzugefügt, die die Ereignisausbreitung nicht unterbricht
$scope.clickOnUpload = function ($event) {
$event.stopPropagation(); // <-- this is important
$timeout(function() {
angular.element(domElement).trigger('click');
}, 0);
};
Die beste Lösung ist:
domElement.click()
Weil die AngleJs TriggerHandler ( angular.element(domElement).triggerHandler('click')
) - Klickereignisse nicht in der DOM-Hierarchie aufblasen , sondern wie oben - genau wie ein normaler Mausklick.
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
Sie können gerne tun
$timeout(function() {
angular.element('#btn2').triggerHandler('click');
});
Einfaches Beispiel:
HTML
<div id='player'>
<div id="my-button" ng-click="someFuntion()">Someone</div>
</div>
JavaScript
$timeout(function() {
angular.element('#my-button').triggerHandler('click');
}, 0);
Dies sucht nach den Schaltflächen id
und führen Sie eine Klickaktion aus. Voila.
Quelle: https://techiedan.com/angularjs-how-to-trigger-click/
Dieser Code funktioniert nicht (beim Klicken wird ein Fehler ausgegeben):
$timeout(function() {
angular.element('#btn2').triggerHandler('click');
});
Sie müssen den querySelector wie folgt verwenden:
$timeout(function() {
angular.element(document.querySelector('#btn2')).triggerHandler('click');
});
Fügen Sie die folgende Zeile in Ihre Methode ein, in der Sie das Klickereignis auslösen möchten
angular.element('#btn_you_want_to_click_progmaticallt').triggerHandler('click');
});