angularjs में घटना को ट्रिगर करने वाले तत्व तक कैसे पहुंचें?

Question

मैं अपने वेब ऐप में बूटस्ट्रैप और AngularJS दोनों का उपयोग करता हूं। मुझे दोनों के साथ काम करने में थोड़ी कठिनाई हो रही है।

मेरे पास एक तत्व है, जिसकी विशेषता है data-provide="typeahead"

<input id="searchText" ng-model="searchText" type="text"
       class="input-medium search-query" placeholder="title"
       data-provide="typeahead" ng-change="updateTypeahead()" />

और मैं उस data-sourceविशेषता को अपडेट करना चाहता हूं जब उपयोगकर्ता क्षेत्र में इनपुट करता है। फ़ंक्शन updateTypeaheadको सही ढंग से ट्रिगर किया गया है, लेकिन मेरे पास उस तत्व तक पहुंच नहीं है जो घटना को ट्रिगर करता है, जब तक कि मैं उपयोग नहीं करता $('#searchText'), जो कि jQuery तरीका है, न कि AngularJS तरीका।

पुरानी शैली जेएस मॉड्यूल के साथ काम करने के लिए अंगुलरजेएस प्राप्त करने का सबसे अच्छा तरीका क्या है।

Answer 1

 updateTypeahead(this)

कार्य करने के लिए DOM तत्व पास नहीं होगा updateTypeahead(this)। यहां thisस्कोप का जिक्र होगा। यदि आप DOM एलिमेंट के उपयोग को एक्सेस करना चाहते हैं updateTypeahead($event)। कॉलबैक फ़ंक्शन में आप DOM तत्व प्राप्त कर सकते हैं event.target।

कृपया ध्यान दें: एनजी-परिवर्तन फ़ंक्शन $ घटना को चर के रूप में पारित करने की अनुमति नहीं देता है।

Comments

एनजी-बदलाव इवेंट ऑब्जेक्ट $ घटना को एक पैरामीटर के रूप में पारित करने का समर्थन नहीं करता है।

— मार्क राजकोट

एनजी-शैली का समर्थन नहीं करता है या तो ऐसा लगता है।

— laggingreflex

नीच भी। एनजी-क्लास के लिए काम नहीं करता है। $ घटना अपरिभाषित हो गई! <li ng-repeat="item in items" role="menuitem" ng-class="{\'selected\' : isSelected($event, item)}">

— साद बेनबोजिद

हाँ ठीक है, वास्तव में इस सवाल का जवाब नहीं देता है, क्योंकि $ घटना एनजी-परिवर्तन के साथ काम नहीं करती है: /

— एड्रियन टोम्बू

शायद सबसे अधिक उत्तर दिया गया उत्तर SO

— MatteoSp

Answer 2

एक घटना को ट्रिगर करने वाले तत्व तक पहुंचने के लिए सामान्य कोणीय तरीका वांछित घटना के लिए एक निर्देश और बाइंड () लिखना है:

app.directive('myChange', function() {
  return function(scope, element) {
    element.bind('change', function() {
      alert('change on ' + element);
    });
  };
});

या डीडीओ के साथ (@ प्रतिपक्ष की टिप्पणी के अनुसार):

app.directive('myChange', function() {
  return { 
    link:  function link(scope, element) {
      element.bind('change', function() {
        alert('change on ' + element);
      });
    }
  }
});

उपरोक्त निर्देश का उपयोग निम्नानुसार किया जा सकता है:

<input id="searchText" ng-model="searchText" type="text" my-change>

प्लंकर ।

टेक्स्ट फ़ील्ड में टाइप करें, फिर छोड़ दें / ब्लर करें। परिवर्तन कॉलबैक फ़ंक्शन आग देगा। उस कॉलबैक फ़ंक्शन के अंदर, आपके पास पहुंच है element।

कुछ अंतर्निहित निर्देश एक $ घटना वस्तु को पारित करने का समर्थन करते हैं। जैसे, एनजी- * क्लिक, एनजी-माउस *। ध्यान दें कि एनजी-परिवर्तन इस घटना का समर्थन नहीं करता है।

यद्यपि आप $ घटना वस्तु के माध्यम से तत्व प्राप्त कर सकते हैं:

<button ng-click="clickit($event)">Hello</button>

$scope.clickit = function(e) {
    var elem = angular.element(e.srcElement);
    ...

यह "कोणीय रास्ते के खिलाफ गहरा" जाता है - मिस्को ।

Comments

आपके समाधान के प्रकारों के अनुसार, यह DDO प्रारूप का उपयोग नहीं करता है, जो इसे बहुत, बहुत भ्रामक बनाता है कि कैसे बंधन में गुंजाइश / जोड़ने के लिए। अपने उदाहरण से कोई आसान तरीका नहीं है कि बस डोपिंग के लिए कुछ डीडीओ चीनी जोड़ें और यह एनजी-क्लिक से $ घटना को पारित करने के रूप में "कोणीय तरीके के खिलाफ" जितना गहरा लगता है। वास्तव में आधिकारिक कोणीय दस्तावेज़ीकरण और कोड उदाहरणों में, मुझे एक भी उदाहरण नहीं मिला, जो आपके लिए समान रूप से है (यानी एक निर्देश केवल किसी डीडीओ के बिना एक अनाम फ़ंक्शन लौटाता है)।

— तपस्वी

@ प्रतिपक्ष, अच्छे अंक। वापस जब मैंने मूल रूप से यह उत्तर लिखा था, तो कोणीय डॉक्स में सरल निर्देशों के उदाहरण थे जो एक अनाम फ़ंक्शन (जो लिंक फ़ंक्शन है) को वापस कर दिया। मैं मानता हूं कि इन दिनों एक डीडीओ बेहतर होगा। मैंने जवाब अपडेट किया।

— मार्क राजकोक

मुझे लगता है कि <बटन एनजी-क्लिक = "पर क्लिक करें ($ event.srcElement)"> बेहतर होगा

— कार्लोस एबीएस

जैसे-जैसे समय बीत रहा है, मैं अधिक से अधिक आश्वस्त हूं कि "कोणीय तरीका" अतिप्रकाशित और अतिव्याप्त है

— याकूब स्टैम जूल

Answer 3

आप आसानी से इस तत्व पर पहली घटना लिख सकते हैं

ng-focus="myfunction(this)"

और अपने जे एस फ़ाइल में नीचे की तरह

$scope.myfunction= function (msg, $event) {
    var el = event.target
    console.log(el);
}

मैंने भी इसका इस्तेमाल किया है।

Comments

यह गुंजाइश देता है, इसलिए यह उम्मीद के मुताबिक काम नहीं करेगा।

— vdclouis

यह ओपी के मुद्दे को बिल्कुल हल नहीं करता है। यकीन है कि यह एक फ़ंक्शन को बताता है कि किसे बुलाया गया है, लेकिन एनजी-चेंज कॉल पर इसका कोई असर नहीं है और दोनों के बीच कोई संबंध नहीं है। ओपी की जरूरत उस तत्व को संदर्भित करने में सक्षम है जो फ़ंक्शन कॉल के भीतर एनजी-चेंज इवेंट को ट्रिगर करता है।

— तपस्वी

यह विशेषताओं को जोड़कर काम करता है (कहना, आईडी): चेतावनी (event.target.id)।

— वीहुई गुओ

Answer 4

नियंत्रक में $ तत्व का उपयोग करके एक समाधान है यदि आप इस समस्या के लिए एक और निर्देश नहीं बनाना चाहते हैं:

appControllers.controller('YourCtrl', ['$scope', '$timeout', '$element',
        function($scope, $timeout, $element) {

    $scope.updateTypeahead = function() {
       // ... some logic here
       $timeout(function() {
           $element[0].getElementsByClassName('search-query')[0].focus();
           // if you have unique id you can use $window instead of $element:
           // $window.document.getElementById('searchText').focus();
       });
    }
}]);

और यह एनजी-परिवर्तन के साथ काम करेगा :

<input id="searchText" type="text" class="search-query" ng-change="updateTypeahead()" ng-model="searchText" />

Answer 5

यदि आप एनजी-मॉडल मूल्य चाहते हैं, यदि आप इस तरह की घटना को ट्रिगर घटना में लिख सकते हैं: $ गुंजाइश.searchText

Answer 6

मुझे यकीन नहीं है कि आपके पास कौन सा संस्करण था, लेकिन यह सवाल बहुत समय पहले पूछा गया था। वर्तमान में कोणीय १.५ के साथ, मैं लोदश से ng-keypressघटना और debounceकार्य का उपयोग कर सकता हूं जैसे कि समान व्यवहार का अनुकरण करने के लिए , इसलिए मैं वार्षिकng-change कार्यक्रम पर कब्जा कर सकता हूं

<input type="text" ng-keypress="edit($event)" ng-model="myModel">

$ गुंजाइश ।edit = _.debounce (फ़ंक्शन ($ घटना) {कंसोल.लॉग ("$ घटना", $ घटना)}, 800)

Answer 7

कोणीय 5 में स्रोत तत्व को पास करने के लिए:

<input #myInput type="text" (change)="someFunction(myInput)">

Comments

प्रश्न एंगुलरज (1) के लिए है

— मिजानुर रहमान मोजुमदार