打开 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>  

应用程序.js（控制器内部）

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

为简单起见，该事件只是将count递增 1。我只想知道手风琴打开时如何触发事件.

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;
}

我的模板.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>