重复的事件触发与嵌套的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,它工作正常,复选框被选中。但是,如果我单击该复选框,该函数被调用两次,并不按预期方式工作。
请帮我解决
对于两个相同的事件,您不需要两个事件处理程序。当您单击输入时,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;
}
像魔术一样工作,非常简单。谢谢雅敏 –
复选框位于内该分区,所以当你点击复选框,你实际上也点击股利。 其实,在你的情况下,你可以从复选框中删除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写入到该标签正确的风格。这是最好的和最正确的解决方案。
不明白为什么这个答案是downvoted。没有解释:/ 这和Yarmins的答案是正确的,但最不方便的是标记为解决方案。 –
您的解决方案有效,但可能是我在某处执行了错误,这是为什么没有得到预期的结果。因此^ 1 –
所以它现在适用于你,或者还有什么是错的?如果是,那究竟是什么? –
尝试加入'$ event.stopPropagation();'和'DIV –
当你的复选框的NG-click'被点击。其点击事件被解雇。并将其传播到父元素。元素在父层次结构中,并且附加了点击事件,他们也会捕获这些事件。这被称为事件冒泡。因此您需要在复选框中单击$ event.stopPropagation()。 –