트리거하고 싶어 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 Extend 방법에 대한 자세한 정보는 여기 .
당신이 사용하는 경우 각의 이전 버전을 , 당신은 사용해야합니다 트리거 대신 triggerHandler을 .
전파 중지를 적용해야하는 경우이 방법을 다음과 같이 사용할 수 있습니다.
<a id="myselector" ng-click="clickOnUpload(); $event.stopPropagation();">
Something
</a>
triggerHandler
대신trigger
angular.element(domElement).triggerHandler('click');
편집 : 현재 $ apply ()주기에서 벗어나야하는 것으로 보입니다. 이를 수행하는 한 가지 방법은 $ timeout ()을 사용하는 것입니다.
$timeout(function() {
angular.element(domElement).triggerHandler('click');
}, 0);
바이올린 참조 : http://jsfiddle.net/t34z7/
$timeout
보다는 setTimeout
같이 $timeout
실행 $apply
필요한 경우에 대한주기를. 또한 ngMock이 $timeout
s가 실행될 때 완전한 제어를 제공하므로 코드를 더 테스트 할 수 있습니다 . docs.angularjs.org/api/ng/service/$timeout
$timeout(fn, 0, false);
$ apply를 호출하지 않도록해야합니다. 그렇지 않습니까?
$timeout
서비스이며, 이러한 요구로 당신이 그것을 사용하기 전에 의존성 주입 docs.angularjs.org/api/ng/service/$timeout
이 다음 솔루션이 저에게 효과적입니다.
angular.element(document.querySelector('#myselector')).click();
대신에 :
angular.element('#myselector').triggerHandler('click');
$('#element').click()
모두가 그것을 볼 경우를 대비하여 이벤트 전파를 중단하지 않는 중요한 줄과 함께 추가 중복 답변을 추가했습니다.
$scope.clickOnUpload = function ($event) {
$event.stopPropagation(); // <-- this is important
$timeout(function() {
angular.element(domElement).trigger('click');
}, 0);
};
가장 좋은 해결책은 다음을 사용하는 것입니다.
domElement.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
간단한 샘플 :
HTML
<div id='player'>
<div id="my-button" ng-click="someFuntion()">Someone</div>
</div>
자바 스크립트
$timeout(function() {
angular.element('#my-button').triggerHandler('click');
}, 0);
이것이하는 일은 버튼을 id
찾고 클릭 동작을 수행하는 것입니다. 짜잔.
클릭 이벤트를 트리거하려는 방법에 다음 줄을 포함하십시오.
angular.element('#btn_you_want_to_click_progmaticallt').triggerHandler('click');
});