StopPropagation() - uib-accordion header 中的复选框 - AngularJS

Question

手风琴内的复选框有问题 header。

用途：

header 中的复选框指示是否正在使用该部分。

用户操作：

有两种方法可以将复选框的值设置为 true。

第一个选项是单击复选框本身。发生这种情况时，该部分应该打开并且该值应该为真。

第二个选项是点击 header 本身。当此操作发生时，该部分应该打开并且值应该为真。

但是当复选框的值为 true 时，只能通过单击复选框本身来更改它。所以这意味着当用户关闭选项卡并选中复选框时，选项卡应该关闭并且复选框应该保持选中状态。

问题：

我正在使用 $event.stopPropagation(); 来更新 header 中复选框的值。但问题是 $event.stopPropagation();阻止 parent 在发生变化时得到通知。所以它只更新复选框值而不更新部分。

Plunker 操作：

通过单击 header 本身打开选项卡。该部分打开并将复选框的值设置为 true。在此之后单击复选框以将值设置为 false。如您所见，它将值设置为 false 但该部分将保持打开状态，因为它被 $event.stopPropagation();

阻止了

笨蛋：http://plnkr.co/edit/CyM6d8Or75SqRGavTYyI?p=preview

谢谢！

布伦特

Answer 1

$event.stopPropagation() 阻止调用手风琴组指令的 toggleOpen 事件（展开和折叠手风琴）。

在那种情况下，您可以在 checkboxClicked 活动中 expand/collapse 手风琴组：

$scope.checkboxClicked = function(tab,e){ 
    $scope.accordion.groups[0].isOpen = !$scope.accordion.groups[0].isOpen; //expand and collapse the accordion group 
    e.stopPropagation();
}

例子

Forked and modified plunker