StopPropagation（） - uib-accordionヘッダーのチェックボックス - AngularJS

Question

アコーディオンヘッダー内のチェックボックスに問題があります。

目的：そのセクションが使用されている場合

ヘッダ内のチェックボックスが指標です。

ユーザアクション：

trueにチェックボックスの値を設定するには2つの方法があります。

最初のオプションは、チェックボックス自体をクリックすることです。これが起こると、セクションが開き、値は真でなければなりません。

2番目のオプションは、ヘッダー自体をクリックすることです。このアクションが発生すると、セクションが開き、値は真でなければなりません。

ただし、チェックボックスの値が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