프로그래밍 방식으로 ngClick을 트리거하는 방법


101

트리거하고 싶어 ng-click런타임에 다음과 같은 요소 싶습니다.

_ele.click();

또는

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

어떻게 할 수 있습니까?


4
아니요, ng-click을 수동으로 트리거 할 수있는 메커니즘을 알고 싶습니다.
mulla.azzi

답변:


182

구문은 다음과 같습니다.

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>

4
어떤 버전의 앵귤러를 사용하고 있습니까? triggerHandler는 1.2.1에서 잘 작동하는 것 같습니다 : jsfiddle.net/t34z7
Blago

13
$ (elem) .click ()이 Angular에서 작동하지 않는 이유를 설명해주세요.
Sergii Shevchyk 2015 년

11
jqLite로 제한되고 선택기를 사용할 수없는 경우 대신 다음을 수행하십시오. angular.element (document.querySelector ( '# mySelector')). trigger ( 'click');
Daniel Nalbach

3
1.2+ 전류 (그래서 현재되지 않음) 각도 버전 @DanielNalbach, 당신은 사용할 필요가 triggerHandler대신trigger
yorch

1
나는 그렇게 확신이 여전히 ... 작동이 전체 JQuery와 함께 작동하지 않을 것 1.6 AngularJS와 아니에요
조지 마우어

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
당신은 아마 각도가있어 사용할 $timeout보다는 setTimeout같이 $timeout실행 $apply필요한 경우에 대한주기를. 또한 ngMock이 $timeouts가 실행될 때 완전한 제어를 제공하므로 코드를 더 테스트 할 수 있습니다 . docs.angularjs.org/api/ng/service/$timeout
2014 년

2
실제로 이것은 $timeout(fn, 0, false);$ apply를 호출하지 않도록해야합니다. 그렇지 않습니까?
Martin Probst

2
이것은 받아 들여진 대답이어야합니다. triggerHandler가 작동합니다. 트리거가 v1.2.25에 없습니다
Howie

4
@deadManN는 $timeout서비스이며, 이러한 요구로 당신이 그것을 사용하기 전에 의존성 주입 docs.angularjs.org/api/ng/service/$timeout
WildlyInaccurate

19

이 다음 솔루션이 저에게 효과적입니다.

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

대신에 :

angular.element('#myselector').triggerHandler('click');

@DotKu 아마도 $ timeout 함수에서 사용할 때와 같은 $ scope 함수를 이미 사용하고 계십니까? 즉, $ scope. $ apply ()에서 $ scope. $ apply ()를 호출 할 수 없습니다 ... 이것이 도움이되기를 바랍니다.
jpmottin

@jpmottin 찾았습니다. $ timeout에 있어야합니다. 감사합니다
Weijing Jay Lin

1
OMG, Angular totallt가 망쳤습니다. 왜 jQuery의 해내는 없습니다$('#element').click()
Jhourlad 에스트 렐라

13

모두가 그것을 볼 경우를 대비하여 이벤트 전파를 중단하지 않는 중요한 줄과 함께 추가 중복 답변을 추가했습니다.

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

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

감사! 이것은 마침내 1.5.11과 완전한 jquery 종속성에서 저에게 효과적이었습니다. $ timeout (function () {var el = document.getElementsByClassName ( 'fa-chevron-up'); angular.element (el) .trigger ( 'click');}, 0);
Florida G.

9

평범한 오래된 JavaScript를 사용하면 저에게 효과적이었습니다.
document.querySelector('#elementName').click();


네. 나를 위해 작동합니다. 감사.
ktaro

5

가장 좋은 해결책은 다음을 사용하는 것입니다.

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


4

당신은 좋아할 수 있습니다

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

내 ng 1.5.3 앱에서이 솔루션에 대해이 오류가 발생합니다. 선택기를 통해 요소를 찾는 것은 jqLite에서 지원되지 않습니다.
Todd Hale


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');
});
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.