打開uib-accordion時的觸發事件

Question

當手風琴打開時，我試圖觸發一個事件。事件應該在手風琴開啓時觸發，而不是在關閉時觸發。

HTML：

<uib-accordion> 
    <uib-accordion-group is-open="status.open" ng-click="showList(status.open)" 
     ng-init="count=0"> 
     <uib-accordion-heading> 
     I can have markup, too! <i class="pull-right glyphicon" 
      ng-class="{'glyphicon-chevron-down': status.open, 
        'glyphicon-chevron-right': !status.open}"></i> 
     </uib-accordion-heading> 
     {{count}} 
    </uib-accordion-group> 
</uib-accordion> 

App.js（控制器內）

$scope.showList = function (status){ 
    if(status) 
    { 
     $scope.count = $scope.count + 1; 
    } 
}; 

爲了簡單起見，只事件遞增count由一個。我只想知道如何在手風琴開啓時觸發事件。

Answer 1

這是一個古老的線程，但由於我遇到了同樣的問題，這裏是我提出的解決方案。

1. uib-accordion[-group]指令有toggleOpen()作用域函數。所以你不能從外部控制器改變它。

2. 讓我們覆蓋template - 手風琴需要template-url。採取從原來的模板： https://github.com/angular-ui/bootstrap/blob/master/template/accordion/accordion-group.html 並創建自己的

3. 從根本<div>和<a>標籤去除toggleOpen()。

4. ，而你喂uib-accordion-heading，與your controller function綁定點擊/按鍵事件 - ie) myToggleOpen(myIsOpenModel)確保您的品目包括整段

5. 在myToggleOpen，你需要什麼

---

html

<uib-accordion> 
    <div uib-accordion-group template-url="myTemplate.html" ng-repeat="item in items track by $index" is-open="item.isOpen"> 
    <uib-accordion-heading> 
     <div ng-click="myToggleOpen(item)">Toggle!</div> 
    </uib-accordion-heading> 

    <div class="content"> 
     Hello! 
    </div> 
    </div> 
</uib-accordion> 

個

JS

scope.myToggleOpen = function (item) { 
    item.isOpen = !item.isOpen; 
} 

myTemplate.html（更改更多如果需要）

<div role="tab" id="{{::headingId}}" aria-selected="{{isOpen}}" class="panel-heading"> 
    <h4 class="panel-title"> 
    <a role="button" data-toggle="collapse" href aria-expanded="{{isOpen}}" aria-controls="{{::panelId}}" tabindex="0" class="accordion-toggle" uib-accordion-transclude="heading" ng-disabled="isDisabled" uib-tabindex-toggle><span uib-accordion-header ng-class="{'text-muted': isDisabled}">{{heading}}</span></a> 
    </h4> 
</div> 
<div id="{{::panelId}}" aria-labelledby="{{::headingId}}" aria-hidden="{{!isOpen}}" role="tabpanel" class="panel-collapse collapse" uib-collapse="!isOpen"> 
    <div class="panel-body" ng-transclude></div> 
</div>