Jak programowo uruchomić ngClick


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>

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/


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

@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);
};

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


Tak. Pracuje dla mnie. Dzięki.
ktaro


4

Możesz polubić

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

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


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

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');
});
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.