लेबल टैग पर दो बार एनजी-क्लिक की ट्रिगरिंग को कैसे रोकें?

Question

Agnular का ng-click दो बार ट्रिगर करता है जब मैं उस लेबल पर क्लिक करता हूं जिसमें इनपुट है। मैंने $event.stopPropagation(); की कोशिश की है लेकिन काम नहीं किया है, इसे कैसे हल करें:?

मैं इस सवाल का भी देख लिया है: Angular.js ng-click events on labels are firing twice

<div class="list-group-item" ng-repeat="item in model.data"> 
    <form role="form" name="selectForm" novalidate> 
    <label ng-click="$event.stopPropagation(); updateSelected();"> 
     <input type="checkbox" ng-model="chechkedSkins[item.id]" /> 
     <span>{{item.name}}</span> 
    </label> 
    </form> 
</div> 

Answer 1

उपयोग ng-change="updateSelected"

उपयोग यह केवल इनपुट अगर आप लेबल पर क्लिक करें के बाद से परिवर्तन भी शुरू हो रहा है पर।

Answer 2

खैर thats क्योंकि label माता-पिता या checkbox के लिए कंटेनर है, इसलिए click हैंडलर अपने मामले में पूरा कंटेनर से जुड़ा हुआ है, जिससे जब भी या तो label या checkbox क्लिक किया जाता है, घटना शुरू हो रहा है।

• सबसे पहले कभी नहीं डालने लेबल के भीतर इनपुट टैग, एक अच्छा तरीका नहीं thats html.In Angular.js में मार्कअप के निर्माण के लिए इस व्यवहार क्लिक करें घटना का कारण बनता है:

  ---

  अपने दृष्टिकोण के साथ गलत क्या है दोनों टैग के लिए ट्रिगर किया जाना है। इसलिए input टैग & label के बीच बाध्यकारी जोड़ने के लिए for लेबल की विशेषता का उपयोग करें।

• लेबल के अंदर $event.stopPropagation() का उपयोग वास्तव में लेबल से डीओएम के शीर्ष पर प्रचार/उबलते हुए सभी घटनाओं को रोकता है। यह किसी भी उद्देश्य की सेवा नहीं करेगा क्योंकि घटना अभी भी लेबल में इनपुट के लिए प्रचारित होगी।

मुझे आशा है कि आप कल्पना कर सकते हैं कि मैं क्या कह रहा हूं।

मैंने क्या किया:

• उपयोग for विशेषता लेबल & को input बाध्य करने के लिए डिफ़ॉल्ट कार्यक्षमता को रोकने के लिए एक click घटना जोड़ें।

• संबंधित input टैग & लिए क्लिक हैंडलर जोड़े नहीं label

  <label for="username" ng-click="$event.preventDefault();">Click me</label> <input type="text" id="username" ng-click="updateSelected();">

Live Demo @ JSFiddle

इस तरह से आप घटना हैंडलिंग में कोई विरोध के बारे में चिंता करने की ज़रूरत नहीं है, एचटीएमएल कोड को बनाए रखने के लिए भी इसका साफ तरीका :)

Answer 3

मैं कोणीय सामग्री 1.0.3 के नवीनतम संस्करण का उपयोग कर रहा हूं और एंड्रॉइड पर बटन के रूप में कॉन्फ़िगर किए गए लेबल पर क्लिक करते समय भी यह समस्या है। मुझे आईओएस या ब्राउज़र (कॉर्डोवा ऐप) पर समस्या नहीं है। निम्नलिखित ने मेरे लिए इसे हल किया।

मेरी एचटीएमएल:

<label class="btn btn-primary" ng-click="vm.goAbout()">About</label> 

मेरी नियंत्रक:

vm.goAbout = debounceFn(function(){ 
     //show dialog here, and now it only pops up once 
    }, 250, false); 

debounce समारोह:

function debounceFn(func, wait, immediate){ 
     var timeout; 
     var deferred = $q.defer(); 
     return function() { 
      var context = this, args = arguments; 
      var later = function() { 
       timeout = null; 
       if(!immediate) { 
       deferred.resolve(func.apply(context, args)); 
       deferred = $q.defer(); 
       } 
      }; 
      var callNow = immediate && !timeout; 
      if (timeout) { 
       $timeout.cancel(timeout); 
      } 
      timeout = $timeout(later, wait); 
      if (callNow) { 
       deferred.resolve(func.apply(context,args)); 
       deferred = $q.defer(); 
      } 
      return deferred.promise; 
     } 
    }