Jak programowo uruchomić ngClick

102

Chcę wyzwolić ng-clickelement w czasie wykonywania, taki jak:

_ele.click();

LUB

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

Jak można to zrobić?

mulla.azzi
źródło
4
Nie, chcę poznać mechanizm, za pomocą którego mogę ręcznie wyzwalać ng-click.
mulla.azzi

Odpowiedzi:

183

Składnia jest następująca:

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

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

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

Więcej informacji o Angular Extend tutaj .

Jeśli używasz starszych wersji angular , powinieneś użyć trigger zamiast triggerHandler .

Jeśli chcesz zastosować propagację zatrzymania, możesz użyć tej metody w następujący sposób:

<a id="myselector" ng-click="clickOnUpload(); $event.stopPropagation();">
  Something
</a>
clopez
źródło
4
jakiej wersji kątowej używasz. triggerHandler wydaje się działać dobrze w 1.2.1: jsfiddle.net/t34z7
Blago
13
proszę wyjaśnić, dlaczego $ (elem) .click () nie działa z Angular?
Sergii Shevchyk
11
Jeśli jesteś ograniczony do jqLite i nie możesz użyć selektora, zrób to: angular.element (document.querySelector ('# mySelector')). Trigger ('click');
Daniel Nalbach
3
@DanielNalbach w aktualnej (i nie tak aktualnej) wersji Angulara 1.2+, musisz użyć triggerHandlerzamiasttrigger
yorch
1
Nie jestem pewien, czy to nadal działa ... angularjs 1.6 Wydaje się, że nie działa z pełnym jQuery
George Mauer
83
angular.element(domElement).triggerHandler('click');

EDYCJA: Wygląda na to, że musisz wyrwać się z obecnego cyklu $ apply (). Jednym ze sposobów jest użycie $ timeout ():

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

Zobacz skrzypce: http://jsfiddle.net/t34z7/

Blago
źródło
2
nawet to nie działa, wyrzuca następujący błąd Error: [$ rootScope: inprog] errors.angularjs.org/1.2.14/$rootScope/inprog?p0=%24apply at Error (native)
mulla.azzi
8
Prawdopodobnie wolisz używać Angulara $timeoutniż setTimeout, ponieważ w razie potrzeby $timeouturuchomisz $applycykl za Ciebie. Dzięki temu Twój kod jest bardziej testowalny, ponieważ ngMock daje Ci pełną kontrolę nad tym, kiedy $timeouts są wykonywane. docs.angularjs.org/api/ng/service/$timeout
WildlyInaccurate
2
Właściwie powinno to być $timeout(fn, 0, false);tak, aby nie wywoływało $ apply, prawda?
Martin Probst
2
To powinna być akceptowana odpowiedź. triggerHandler działa. wyzwalacz nie działa w wersji 1.2.25
Howie
4
@deadManN $timeoutjest usługą i jako taka musi zostać wstrzyknięta w zależności, zanim będzie można z niej korzystać docs.angularjs.org/api/ng/service/$timeout
WildlyInaccurate
19

To rozwiązanie działa dla mnie:

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

zamiast :

angular.element('#myselector').triggerHandler('click');
jpmottin
źródło
@DotKu Może jesteś już w funkcji $ scope, tak jak wtedy, gdy używasz funkcji $ timeout? Innymi słowy, nie możesz wywołać $ scope. $ Apply () w $ scope. $ Apply () ... Mam nadzieję, że to ci pomoże.
jpmottin
@jpmottin Znalazłem go, musi być umieszczony w $ timeout. Dzięki
Weijing Jay Lin
1
OMG, Angular totallt to zrujnował. Dlaczego nie mogą naśladować jQuery's$('#element').click()
Jhourlad Estrella
13

Na wypadek, gdyby wszyscy to widzieli, dodałem dodatkową powielającą odpowiedź z ważną linią, która nie przerwie propagacji zdarzenia

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

    $timeout(function() {
        angular.element(domElement).trigger('click');
    }, 0);
};
Ukryty
źródło
Dzięki! To w końcu zadziałało w 1.5.11 i przy pełnej zależności od jQuery. $ timeout (function () {var el = document.getElementsByClassName ('fa-chevron-up'); angular.element (el) .trigger ('click');}, 0);
Florida G.
9

Użycie zwykłego starego JavaScript działało dla mnie:
document.querySelector('#elementName').click();

charlchad
źródło
Tak. Pracuje dla mnie. Dzięki.
ktaro
5

Najlepszym rozwiązaniem jest użycie:

domElement.click()

Ponieważ zdarzenia kliknięcia angularjs triggerHandler ( angular.element(domElement).triggerHandler('click')) nie pojawiają się w hierarchii DOM, ale to powyżej - tak jak zwykłe kliknięcie myszą.

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
źródło
4

Możesz polubić

$timeout(function() {
   angular.element('#btn2').triggerHandler('click');
});
Fizer Khan
źródło
Otrzymuję ten błąd dla tego rozwiązania w mojej aplikacji ng 1.5.3: Wyszukiwanie elementów za pomocą selektorów nie jest obsługiwane przez jqLite.
Todd Hale
1

Prosta próbka:

HTML

<div id='player'>
    <div id="my-button" ng-click="someFuntion()">Someone</div>
</div>

JavaScript

$timeout(function() {
    angular.element('#my-button').triggerHandler('click');
}, 0);

Poszukuje przycisku idi wykonuje kliknięcie. Voila.

Źródło: https://techiedan.com/angularjs-how-to-trigger-click/

Leniel Maccaferri
źródło
0

Ten kod nie zadziała (po kliknięciu wyrzuci błąd):

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

Musisz użyć querySelector w następujący sposób:

$timeout(function() {
   angular.element(document.querySelector('#btn2')).triggerHandler('click');
});
Guillaume-Alexandre
źródło
0

Uwzględnij następujący wiersz w swojej metodzie, w której chcesz wywołać zdarzenie kliknięcia

angular.element('#btn_you_want_to_click_progmaticallt').triggerHandler('click');
});
Vinayak Shedgeri
źródło