प्रोग्रामेटिक रूप से एनग्लिक कैसे ट्रिगर करें

Question

मैं ng-clickरनटाइम पर एक तत्व को ट्रिगर करना चाहता हूं जैसे:

_ele.click();

या

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

यह कैसे किया जा सकता है?

Comments

नहीं, मैं उस तंत्र को जानना चाहता हूं जिसके द्वारा मैं मैन्युअल रूप से एनजी-क्लिक को ट्रिगर कर सकता हूं।

— mulla.azzi

Answer 1

वाक्य रचना निम्नलिखित है:

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

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

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

कोणीय विस्तार पर अधिक जानकारी यहाँ रास्ता ।

यदि आप कोणीय के पुराने संस्करणों का उपयोग कर रहे हैं , तो आपको ट्रिगरहैंडलर के बजाय ट्रिगर का उपयोग करना चाहिए ।

यदि आपको स्टॉप प्रचार लागू करने की आवश्यकता है, तो आप इस विधि का उपयोग इस प्रकार कर सकते हैं:

<a id="myselector" ng-click="clickOnUpload(); $event.stopPropagation();">
  Something
</a>

Comments

आप कोणीय के किस संस्करण का उपयोग कर रहे हैं। ट्रिगरहैंडर 1.2.1 में ठीक काम करता है: jsfiddle.net/t34z7

— Blago

कृपया समझाएं कि $ (elem) .click () कोणीय के साथ काम क्यों नहीं करता है?

— सर्गई शेवचेक

यदि आप jqLite तक सीमित हैं और चयनकर्ता का उपयोग नहीं कर सकते हैं, तो इसके बजाय करें: angular.element (document.querySelector ('# mySelector'))। ट्रिगर ('क्लिक');

— डैनियल नलबाच

@DanielNalbach वर्तमान में (और इतना चालू नहीं) कोणीय संस्करण 1.2+, आपको triggerHandlerइसके बजाय का उपयोग करना होगाtrigger

— yorch

मुझे यकीन नहीं है कि यह अभी भी काम करता है ... angularjs 1.6 ऐसा लगता है कि यह पूरी तरह से काम नहीं कर रहा है

— जॉर्ज माउर

Answer 2

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

संपादित करें: ऐसा प्रतीत होता है कि आपको वर्तमान $ लागू () चक्र से बाहर निकलना होगा। ऐसा करने का एक तरीका $ टाइमआउट () है:

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

फिडल देखें: http://jsfiddle.net/t34z7/

Comments

यहां तक ​​कि यह न तो काम कर रहा है, न ही इसकी त्रुटि के बाद इसका थ्रोइंग एरर: [$ rootScope: inprog] error.angularjs.org/1.2.14/$rootScope/inprog?p0=%24apply for Error (देशी)

— mulla.azzi

आप शायद $timeoutइसके बजाय कोणीय का उपयोग करना चाहते हैं setTimeout, यदि आवश्यक हो तो आपके लिए $timeoutएक $applyचक्र चलाएगा । यह आपके कोड को और अधिक परीक्षण योग्य बनाता है क्योंकि ngMock आपको पूर्ण नियंत्रण देता है जब $timeouts निष्पादित होते हैं। docs.angularjs.org/api/ng/service/$timeout

— WildlyInaccurate

वास्तव में यह होना चाहिए $timeout(fn, 0, false);ताकि यह $ लागू न हो, न हो?

— मार्टिन प्रोब्स्ट

यह स्वीकृत उत्तर होना चाहिए। ट्रिगरहैंडलर काम करता है। ट्रिगर v1.2.25 में नहीं है

— होवी

@deadManN $timeoutएक सेवा है और इससे पहले कि आप इसे docs.angularjs.org/api/ng/service/$timeout

— WildlyInaccurate

Answer 3

यह समाधान मेरे लिए काम करता है:

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

के बजाय :

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

Comments

@DotKu शायद आप पहले से ही एक $ स्कोप फ़ंक्शन में हैं जैसे आप $ टाइमआउट फ़ंक्शन में उपयोग करते हैं? दूसरे शब्दों में, आप $ स्कोप को नहीं बुला सकते। $ स्कोप में $ लागू ()। $ लागू करें () ... मुझे आशा है कि यह आपकी मदद कर सकता है।

— jpmottin

@jpmottin मुझे यह मिला, इसे $ टाइमआउट में रखा जाना चाहिए। धन्यवाद

— Weijing जे लिन

OMG, कोणीय टोटल ने इसे बर्बाद कर दिया। वे jQuery के$('#element').click()

— Jhourlad Estrella

Answer 4

बस अगर हर कोई इसे देखता है, तो मैंने एक महत्वपूर्ण लाइन के साथ अतिरिक्त डुप्लिकेटिंग उत्तर जोड़ा, जो घटना के प्रसार को नहीं तोड़ देगा

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

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

Comments

धन्यवाद! यह अंत में मेरे लिए 1.5.11 में काम किया, और पूरी तरह से jquery निर्भरता। $ टाइमआउट (फ़ंक्शन () {var el = document.getElementsByClassName ('fa-chevron-up'); angular.element (el) .trigger ('click');}; 0);

— फ्लोरिडा जी।

Answer 5

सादे पुराने जावास्क्रिप्ट का उपयोग मेरे लिए काम किया:
document.querySelector('#elementName').click();

Comments

हाँ। मेरे लिये कार्य करता है। धन्यवाद।

— कटारो

Answer 6

उपयोग करने के लिए सबसे अच्छा समाधान है:

domElement.click()

क्योंकि कोणीयज ट्रिगरहैंडलर ( 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

Answer 7

आप पसंद कर सकते हैं

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

Comments

मुझे अपने एनजी 1.5.3 ऐप में इस समाधान के लिए यह त्रुटि मिलती है: चयनकर्ताओं के माध्यम से तत्वों को देखना jqLite द्वारा समर्थित नहीं है।

— टोड हेल

Answer 8

सरल नमूना:

एचटीएमएल

<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/

Answer 9

यह कोड काम नहीं करेगा (क्लिक करने पर कोई त्रुटि फेंकें):

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

आपको निम्न के रूप में querySelector का उपयोग करने की आवश्यकता है:

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

Answer 10

अपनी विधि में निम्नलिखित पंक्ति शामिल करें, जहाँ आप क्लिक इवेंट को ट्रिगर करना चाहते हैं

angular.element('#btn_you_want_to_click_progmaticallt').triggerHandler('click');
});