javascript - uib-accordion 打开时触发事件

Question

我试图在打开 Accordion 时触发一个事件。该事件应该在 Accordion 打开时触发，而不是在关闭时触发。

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(在 Controller 内)

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

为了简单起见，该事件仅将 count 加一。我只想知道如何在打开 Accordion 时触发事件。

Answer 1

这是一个旧线程，但由于我遇到了同样的问题，这是我想出的解决方案。

1. uib-accordion[-group]指令有toggleOpen()作用域函数。因此您无法从外部 Controller 更改它。

2. 让我们覆盖 template - Accordion 需要 template-url 。获取原始模板: https://github.com/angular-ui/bootstrap/blob/master/template/accordion/accordion-group.html并创建您自己的

3. 删除 toggleOpen()从根开始<div>和<a>标签。

4. 当你喂食时uib-accordion-heading ，将点击/按键事件与 your controller function 绑定(bind)-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>