重复的事件触发与嵌套的div ng-

我面临的问题，因为我有一个div内的复选框，我想在这两种情况下调用一个函数：如果我们改变复选框的值或点击div。重复的事件触发与嵌套的div ng-

现在的问题是，当我点击复选框，事件被激发两次，我没有得到预期的结果。

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

现在，如果我点击div，它工作正常，复选框被选中。但是，如果我单击该复选框，该函数被调用两次，并不按预期方式工作。

请帮我解决

来源

2017-09-26 JEET ADHIKARI

尝试加入'$ event.stopPropagation（）;'和'DIV –

当你的复选框的NG-click'被点击。其点击事件被解雇。并将其传播到父元素。元素在父层次结构中，并且附加了点击事件，他们也会捕获这些事件。这被称为事件冒泡。因此您需要在复选框中单击$ event.stopPropagation（）。 –

对于两个相同的事件，您不需要两个事件处理程序。当您单击输入时，div也会被点击。所以你只需要从你的代码中删除ng-change。

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

和控制器：

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

看this plunker

来源

2017-09-26 15:06:32 Yamin

像魔术一样工作，非常简单。谢谢雅敏 –

复选框位于内该分区，所以当你点击复选框，你实际上也点击股利。其实，在你的情况下，你可以从复选框中删除ng-属性，它仍然可以工作，因为函数将通过点击div来调用。但是，这是不正确的方式来使用复选框！

这里的第一个问题是，如果你真的需要这个div？我宁愿用标签来代替：

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

在这种情况下，它会正常工作，你只需要适当的CSS写入到该标签正确的风格。这是最好的和最正确的解决方案。

来源

2017-09-26 14:40:50

不明白为什么这个答案是downvoted。没有解释：/ 这和Yarmins的答案是正确的，但最不方便的是标记为解决方案。 –

您的解决方案有效，但可能是我在某处执行了错误，这是为什么没有得到预期的结果。因此^ 1 –

所以它现在适用于你，或者还有什么是错的？如果是，那究竟是什么？ –

重复的事件触发与嵌套的div ng-

回答

相关问题