Chcę wyzwolić ng-click
element w czasie wykonywania, taki jak:
_ele.click();
LUB
_ele.trigger('click', function());
Jak można to zrobić?
Chcę wyzwolić ng-click
element w czasie wykonywania, taki jak:
_ele.click();
LUB
_ele.trigger('click', function());
Jak można to zrobić?
Odpowiedzi:
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>
triggerHandler
zamiasttrigger
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/
$timeout
niż setTimeout
, ponieważ w razie potrzeby $timeout
uruchomisz $apply
cykl za Ciebie. Dzięki temu Twój kod jest bardziej testowalny, ponieważ ngMock daje Ci pełną kontrolę nad tym, kiedy $timeout
s są wykonywane. docs.angularjs.org/api/ng/service/$timeout
$timeout(fn, 0, false);
tak, aby nie wywoływało $ apply, prawda?
$timeout
jest 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
To rozwiązanie działa dla mnie:
angular.element(document.querySelector('#myselector')).click();
zamiast :
angular.element('#myselector').triggerHandler('click');
$('#element').click()
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);
};
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
Możesz polubić
$timeout(function() {
angular.element('#btn2').triggerHandler('click');
});
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 id
i wykonuje kliknięcie. Voila.
Źródło: https://techiedan.com/angularjs-how-to-trigger-click/
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');
});
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');
});