StopPropagation() - uib-accordion 헤더의 체크 박스 - AngularJS

Question

아코디언 헤더 안에있는 체크 박스에 문제가 있습니다.

목적 : 섹션이 사용되는 경우

헤더에있는 체크 박스가 표시된다.

사용자 작업 : true로 체크 박스의 값을 설정하는 방법은 두 가지가 있습니다

.

첫 번째 옵션은 확인란 자체를 클릭하는 것입니다. 이 경우 섹션이 열리고 값이 true 여야합니다.

두 번째 옵션은 머리글 자체를 클릭하는 것입니다. 이 동작이 발생하면 섹션이 열리고 값이 true 여야합니다.

그러나 확인란의 값이 true이면 확인란 자체를 클릭하여 변경할 수 있습니다. 따라서 사용자가 탭을 닫고 확인란이 선택되어 탭이 닫히면 체크 박스가 계속 선택되어야합니다..

문제 : 헤더 내부의 체크 박스의 값을 업데이트 할 $event.stopPropagation();을 사용하고

. 하지만 문제는 $ event.stopPropagation(); 무언가가 변경되면 부모에게 통보하도록 차단합니다. 따라서 체크 박스 값 만 업데이트하고 섹션은 업데이트하지 않습니다.

Plunker 조치 : 헤더 자체를 클릭하여

탭을 엽니 다. 섹션이 열리고 확인란의 값이 true로 설정됩니다. 이 후 확인란을 클릭하여 값을 false로 설정하십시오. 당신이 볼 수 있듯이이 값을 false로 설정하지만이 $event.stopPropagation();

Plunker에 의해 차단받을 때문에 섹션이 열려있을 것입니다 : http://plnkr.co/edit/CyM6d8Or75SqRGavTYyI?p=preview

감사합니다! 브렌트

Answer 1

$event.stopPropagation()

는 toggleOpen 이벤트 (확장 아코디언 붕괴) 아코디언 그룹 지시어를 호출 할 수 없습니다. 당신이/확장 checkboxClicked 이벤트에 아코디언 그룹을 축소 수있는 경우

:

$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