当 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 加一。我只想知道如何在打开手风琴时触发事件。

- JohnDizzle

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>

- Hyu Kim

---

对于使用通用手风琴模板重写的优秀解决方案，请加一。如果有人碰巧遇到这个问题，你还需要用“div”来包含“myTemplate.html”中的div，否则会出现“只能包含一个根元素错误”的错误提示。 - Dblaze47