Émission répétée d'événement avec ng-clic dans div imbriqué

Question

Je suis confronté au problème parce que j'ai une case à cocher dans un div et je veux appeler une fonction dans les deux cas: si nous changeons la valeur de la case à cocher ou cliquez sur la div.

Maintenant, le problème est que, lorsque je clique sur la case à cocher, l'événement est renvoyé deux fois et je n'obtiens pas le résultat attendu.

<div ng-click="checkEntry(config.id)"><input type="checkbox" ng-model="modelCheckbox" ng-change="checkEntry(config.id)" ng-checked="someArray.indexOf(config.id) !== -1"></div> 

$scope.checkEntry = function(id){ 
    var idx = $scope.someArray.indexOf(id); 
    if(idx === -1){ 
     $scope.someArray.push(id); 
    }else{ 
     $scope.someArray.splice(idx, 1); 
    } 
} 

Maintenant, si je clique sur div, cela fonctionne très bien et la case est cochée. Mais si je clique sur le checkBox, la fonction est appelée deux fois, et cela ne fonctionne pas comme prévu.

S'il vous plaît me aider avec une solution

Answer 1

Vous n'avez pas besoin de deux gestionnaires d'événements pour deux événements identiques. Lorsque vous cliquez sur l'entrée, le div sera également cliqué. il suffit donc de supprimer ng-change de votre code.

<div ng-click="checkEntry(config.id)">test 
<input type="checkbox" ng-model="modelCheckbox" ng-checked="checked"> 

et dans votre contrôleur:

$scope.checked = true; 
$scope.checkEntry = function(id){ 
    $scope.checked = !$scope.checked; 
} 

Regardez this plunker

Answer 2

Checkbox est situé à l'intérieur de cette div, donc lorsque vous cliquez sur la case que vous cliquez sur div en fait aussi. En fait, dans votre cas, vous pouvez supprimer ng-change attribut de case à cocher et cela fonctionnera toujours, car la fonction sera appelée via un clic sur div quand même. Mais ce n'est pas correct de travailler avec des cases à cocher!

Première question ici est si vous avez vraiment besoin de div? Je préfère utiliser l'étiquette à la place:

<label for="my-checkbox"><input id="my-checkbox" type="checkbox" ng-model="modelCheckbox" ng-change="checkEntry(config.id)" ng-checked="someArray.indexOf(config.id) !== -1"></label> 

Dans ce cas, il fonctionne très bien, il vous suffit d'écrire une bonne style CSS pour cette étiquette correctement. C'est la meilleure solution et la plus correcte.