Как запустить ngClick программно

102

Я хочу вызвать ng-clickэлемент во время выполнения, например:

_ele.click();

ИЛИ

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

Как это может быть сделано?

mulla.azzi
источник
4
Нет, я хочу знать механизм, с помощью которого я могу запускать ng-click вручную.
mulla.azzi

Ответы:

183

Синтаксис следующий:

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

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

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

Подробнее о способе расширения Angular здесь .

Если вы используете старые версии angular , вам следует использовать trigger вместо triggerHandler .

Если вам нужно применить остановку распространения, вы можете использовать этот метод следующим образом:

<a id="myselector" ng-click="clickOnUpload(); $event.stopPropagation();">
  Something
</a>
Clopez
источник
4
какую версию angular вы используете. triggerHandler, кажется, работает нормально в 1.2.1: jsfiddle.net/t34z7
Благо
13
объясните, пожалуйста, почему $ (elem) .click () не работает с Angular?
Сергей Шевчик
11
Если вы ограничены jqLite и не можете использовать селектор, сделайте это вместо этого: angular.element (document.querySelector ('# mySelector')). Trigger ('click');
Даниэль Нальбах
3
@DanielNalbach в текущей (и не очень актуальной) версии Angular 1.2+, вы должны использовать triggerHandlerвместоtrigger
yorch
1
Я не уверен, что это все еще работает ... angularjs 1.6, похоже, не работает с полным jquery
Джордж Мауэр
83
angular.element(domElement).triggerHandler('click');

РЕДАКТИРОВАТЬ: Похоже, вам нужно выйти из текущего цикла $ apply (). Один из способов сделать это - использовать $ timeout ():

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

См. Скрипку: http://jsfiddle.net/t34z7/

Благо
источник
2
даже это не работает, возникает следующая ошибка Ошибка: [$ rootScope: inprog] errors.angularjs.org/1.2.14/$rootScope/inprog?p0=%24apply at Error (native)
mulla.azzi
8
Вы, вероятно, захотите использовать Angular, $timeoutа не setTimeout, поскольку $timeoutпри необходимости запустит $applyцикл за вас. Это также делает ваш код более тестируемым, поскольку ngMock дает вам полный контроль над выполнением $timeouts. docs.angularjs.org/api/ng/service/$timeout
WildlyInaccurate
2
На самом деле это должно быть $timeout(fn, 0, false);так, чтобы не вызывать $ apply, не так ли?
Martin Probst
2
Это должен быть принятый ответ. triggerHandler работает. триггер не работает в версии 1.2.25
Хауи
4
@deadManN $timeout- это сервис, и поэтому его необходимо внедрить в зависимости, прежде чем вы сможете его использовать docs.angularjs.org/api/ng/service/$timeout
WildlyInaccurate
19

Для меня работает следующее решение:

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

вместо того :

angular.element('#myselector').triggerHandler('click');
jpmottin
источник
@DotKu Может быть, вы уже находитесь в функции $ scope, например, когда вы используете функцию $ timeout? Другими словами, вы не можете вызвать $ scope. $ Apply () в $ scope. $ Apply () ... Надеюсь, это может вам помочь.
jpmottin
@jpmottin Я нашел его, его нужно поместить в $ timeout. Спасибо
Вейцзин Джей Лин
1
OMG, Angular Totallt все испортил. Почему они не могут имитировать jQuery$('#element').click()
Jhourlad Estrella
13

На всякий случай, если все это видят, я добавил дополнительный дублирующий ответ с важной строкой, которая не нарушит распространение события.

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

    $timeout(function() {
        angular.element(domElement).trigger('click');
    }, 0);
};
Скрытый
источник
Спасибо! Это наконец сработало для меня в 1.5.11 и полной зависимости от jquery. $ timeout (функция () {var el = document.getElementsByClassName ('fa-chevron-up'); angular.element (el) .trigger ('click');}, 0);
Флорида Дж.
9

У меня сработало использование простого старого JavaScript:
document.querySelector('#elementName').click();

Чарльчад
источник
Да. Работает для меня. Спасибо.
ktaro
5

Лучшее решение - использовать:

domElement.click()

Потому что события click angularjs triggerHandler ( angular.element(domElement).triggerHandler('click')) не всплывают в иерархии DOM, а то, что выше, - точно так же, как обычный щелчок мыши.

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

Мортен Холмгаард
источник
4

Вы можете сделать как

$timeout(function() {
   angular.element('#btn2').triggerHandler('click');
});
Физер Хан
источник
Я получаю эту ошибку для этого решения в моем приложении ng 1.5.3: поиск элементов с помощью селекторов не поддерживается jqLite.
Тодд Хейл,
1

Простой образец:

HTML

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

JavaScript

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

Это ищет кнопку idи выполняет действие щелчка. Вуаля.

Источник: https://techiedan.com/angularjs-how-to-trigger-click/

Лениэль Маккаферри
источник
0

Этот код не будет работать (выдает ошибку при нажатии):

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

Вам нужно использовать querySelector следующим образом:

$timeout(function() {
   angular.element(document.querySelector('#btn2')).triggerHandler('click');
});
Гийом-Александр
источник
0

Включите следующую строку в свой метод там, где вы хотите вызвать событие щелчка

angular.element('#btn_you_want_to_click_progmaticallt').triggerHandler('click');
});
Винаяк Шеджери
источник