Programing

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

crosscheck 2020. 8. 20. 07:36
반응형

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


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>

angular.element(domElement).triggerHandler('click');

편집 : 현재 $ 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()

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찾고 클릭 동작을 수행하는 것입니다. 짜잔.

출처 : https://techiedan.com/angularjs-how-to-trigger-click/


이 코드는 작동하지 않습니다 (클릭하면 오류 발생).

$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');
});

참고URL : https://stackoverflow.com/questions/22447374/how-to-trigger-ngclick-programmatically

반응형