Come impedire l'attivazione di ng-clic per due volte sul tag etichetta?

Question

I trigger ng-clic di Agnular si attivano due volte quando faccio clic sull'etichetta che contiene input al suo interno. Ho provato $event.stopPropagation(); ma non ha funzionato, come risolvere questo:?

Ho controllato questa domanda anche: 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

Usa ng-change="updateSelected"

Utilizzare questo solo per l'ingresso dato che il cambiamento è innescato, anche se si fa clic sull'etichetta.

Answer 2

questo è bene perché label è il genitore o il contenitore per il checkbox, in modo che il gestore click è attaccato al contenitore completo nel tuo caso, in tal modo ogni volta che sia label o checkbox viene cliccato, evento viene attivato.

---

cosa è sbagliato con il vostro approccio:

• In primo luogo non inserire i tag input all'interno dell'etichetta, quello non è un buon modo per costruire markup in html.In Angular.js questo comportamento causa l'evento click essere innescato per entrambi i tag. quindi per aggiungere un binding tra input tag & label utilizzare l'attributo for dell'etichetta.
• L'utilizzo di $event.stopPropagation() all'interno dell'etichetta impedisce effettivamente la propagazione/l'ebollizione di tutti gli eventi all'inizio del DOM dall'etichetta. questo non ha alcuno scopo perché l'evento si propagherebbe ancora all'input con l'etichetta.

Spero che tu possa visualizzare quello che sto dicendo.

quello che ho fatto:

• Usa for attributo per associare il input all'etichetta & aggiungere un evento click per evitare che la funzionalità predefinita.

• aggiungere il gestore click al rispettivo input tag & non il label

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

Live Demo @ JSFiddle

In questo modo non c'è bisogno di preoccuparsi di eventuali conflitti in gestione degli eventi, anche il suo modo pulito per mantenere il codice HTML :)

Answer 3

Sto usando l'ultima versione di Angular Material 1.0.3 e ho ancora questo problema quando clicco su etichette che sono configurate come pulsanti su Android. Non ho il problema su IOS o il browser (app cordova). Il seguente ha risolto per me.

mio html:

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

mio controller:

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

La funzione antirimbalzo:

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; 
     } 
    }