StopPropagation() - Checkbox in uib-accordion header - AngularJS

Question

I'm having problems with checkboxes inside an accordion header.

Purpose:

The checkbox in the header is an indicator if that section is being used.

User actions:

There are two ways to set the value of the checkbox to true.

The first option is by click on the checkbox itself. When this happens the section should open and the value should be true.

The second option is by click on the header itself. When this action happens the section should open and the value should be true.

But when the value of the checkbox is true it only can be changed by clicking on the checkbox itself. So this means when the user closes the tab and the checkbox is checked the tab should close and the checkbox should remain checked.

Problem:

I'm using $event.stopPropagation(); to update the value of the checkbox inside the header. But the problem is that $event.stopPropagation(); blocks the parent to be notified when something changes. So it only updates the checkbox value but not the section.

Plunker actions:

Open the tab by clicking on the header itself. The section opens and the value of the checkbox set to true. After this click on the checkbox to set the value to false. As you can see it set the value to false but the section will stay open because it get blocked by the $event.stopPropagation();

Plunker: http://plnkr.co/edit/CyM6d8Or75SqRGavTYyI?p=preview

Thanks!

Brent

Answer 1

$event.stopPropagation() prevents toggleOpen event ( expand and collapse the accordion) of accordion-group directive to be invoked.

In that case you could expand/collapse accordion group in checkboxClicked event:

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

Example

Forked and modified plunker