打开uib手风琴时触发事件

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. 从根toggleOpen()和<a>标记中删除<a>。
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>