So lösen Sie ngClick programmgesteuert aus

101

Ich möchte zur ng-clickLaufzeit ein Element auslösen wie:

_ele.click();

ODER

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

Wie kann das gemacht werden?

mulla.azzi
quelle
4
Nein, ich möchte wissen, über welchen Mechanismus ich ng-click manuell auslösen kann.
mulla.azzi

Antworten:

182

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>
Clopez
quelle
4
Welche Version von Angular verwenden Sie? TriggerHandler scheint in 1.2.1 gut zu funktionieren: jsfiddle.net/t34z7
Blago
13
Bitte erklären Sie, warum $ (elem) .click () nicht mit Angular funktioniert.
Sergii Shevchyk
11
Wenn Sie auf jqLite beschränkt sind und keinen Selektor verwenden können, gehen Sie stattdessen folgendermaßen vor: angle.element (document.querySelector ('# mySelector')). Trigger ('click');
Daniel Nalbach
3
@ DanielNalbach in aktuellen (und nicht so aktuellen) Angular-Versionen 1.2+ müssen Sie triggerHandleranstelle vontrigger
yorch
1
Ich bin mir nicht sicher, ob das noch funktioniert ... angularjs 1.6 das scheint nicht mit vollem jquery zu funktionieren
George Mauer
83
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/

Blago
quelle
2
Auch wenn dies nicht funktioniert, wird der folgende Fehler ausgelöst: [$ rootScope: inprog] Errors.angularjs.org/1.2.14/$rootScope/inprog?p0=%24apply at Error (native)
mulla.azzi
8
Sie möchten wahrscheinlich $timeouteher Angulars als verwenden setTimeout, da bei Bedarf $timeoutein $applyZyklus für Sie ausgeführt wird. Es macht Ihren Code auch testbarer, da Sie mit ngMock die volle Kontrolle darüber haben, wann $timeouts ausgeführt werden. docs.angularjs.org/api/ng/service/$timeout
WildlyInaccurate
2
Eigentlich sollte dies $timeout(fn, 0, false);so sein, dass es $ apply nicht aufruft, nicht wahr?
Martin Probst
2
Dies sollte die akzeptierte Antwort sein. triggerHandler funktioniert. Trigger nicht in v1.2.25
Howie
4
@deadManN $timeoutist ein Dienst und muss als solcher in Abhängigkeit injiziert werden, bevor Sie ihn verwenden können. docs.angularjs.org/api/ng/service/$timeout
WildlyInaccurate
19

Diese folgende Lösung funktioniert für mich:

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

anstatt :

angular.element('#myselector').triggerHandler('click');
jpmottin
quelle
@DotKu Vielleicht befinden Sie sich bereits in einer $ scope-Funktion, wie wenn Sie sie in einer $ timeout-Funktion verwenden? Mit anderen Worten, Sie können keinen $ scope. $ Apply () in einem $ scope aufrufen. $ Apply () ... Ich hoffe, dies könnte Ihnen helfen.
Jpmottin
@jpmottin Ich habe es gefunden, es muss in $ timeout platziert werden. Vielen Dank
Weijing Jay Lin
1
OMG, Angular hat es total ruiniert. Warum können sie nicht jQuery's $('#element').click()
nachahmen
13

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);
};
Hintergedanke
quelle
Vielen Dank! Dies funktionierte schließlich für mich in 1.5.11 und voller JQuery-Abhängigkeit. $ timeout (function () {var el = document.getElementsByClassName ('fa-chevron-up'); angle.element (el) .trigger ('click');}, 0);
Florida G.
9

Die Verwendung von einfachem altem JavaScript hat bei mir funktioniert:
document.querySelector('#elementName').click();

charlchad
quelle
Ja. Funktioniert bei mir. Vielen Dank.
Ktaro
4

Sie können gerne tun

$timeout(function() {
   angular.element('#btn2').triggerHandler('click');
});
Fizer Khan
quelle
Ich erhalte diesen Fehler für diese Lösung in meiner ng 1.5.3-App: Das Nachschlagen von Elementen über Selektoren wird von jqLite nicht unterstützt.
Todd Hale
1

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/

Leniel Maccaferri
quelle
0

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

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');
});
Vinayak Shedgeri
quelle