Я хочу вызвать ng-click
элемента во время выполнения, например:
_ele.click();
ИЛИ
_ele.trigger('click', function());
Как это можно сделать?
Я хочу вызвать ng-click
элемента во время выполнения, например:
_ele.click();
ИЛИ
_ele.trigger('click', function());
Как это можно сделать?
Синтаксис следующий:
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, вы должны использовать триггер вместо triggerHandler.
Если вам нужно применить распространение остановки, вы можете использовать этот метод следующим образом:
<a id="myselector" ng-click="clickOnUpload(); $event.stopPropagation();">
Something
</a>
angular.element(domElement).triggerHandler('click');
EDIT: Похоже, вам нужно вырваться из текущего цикла $apply(). Один из способов сделать это - использовать $timeout():
$timeout(function() {
angular.element(domElement).triggerHandler('click');
}, 0);
Смотрите скрипту: http://jsfiddle.net/t34z7/
Это следующее решение работает для меня:
angular.element(document.querySelector('#myselector')).click();
вместо:
angular.element('#myselector').triggerHandler('click');
На всякий случай, когда все это видят, я добавил дополнительный дублирующий ответ с важной строкой, которая не нарушит распространение событий
$scope.clickOnUpload = function ($event) {
$event.stopPropagation(); // <-- this is important
$timeout(function() {
angular.element(domElement).trigger('click');
}, 0);
};
Использование обычного старого JavaScript работало для меня: document.querySelector('#elementName').click();
Вы можете сделать как
$timeout(function() {
angular.element('#btn2').triggerHandler('click');
});
Лучшее решение - использовать:
domElement.click()
Поскольку в иерархии DOM не отображаются пузырьки событий triggerularss triggerHandler (angular.element(domElement).triggerHandler('click')
), но один из них делает это - как обычный щелчок мыши.
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
Я думаю, было бы лучше избегать "нажатия" на элементы. Вместо этого следует попытаться изменить базовые данные (ng-model), которые (почти всегда) просматриваются элементом.
Пример с флажком:
var app = angular.module('myApp', []);
app.controller('myController', function($scope) {
$scope.toggle = function() {
$scope.myCheckboxValue = !$scope.myCheckboxValue;
};
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='myApp' ng-controller='myController'>
<input type="checkbox" ng-model="myCheckboxValue" />
<button ng-click="toggle()">Toggle</button>
</div>
Этот код не будет работать (выдает ошибку при нажатии):
$timeout(function() {
angular.element('#btn2').triggerHandler('click');
});
Вам нужно использовать querySelector следующим образом:
$timeout(function() {
angular.element(document.querySelector('#btn2')).triggerHandler('click');
});
Включите следующую строку в ваш метод там, где вы хотите вызвать событие клика
angular.element('#btn_you_want_to_click_progmaticallt').triggerHandler('click');
});