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递增1。我只是想知道手风琴打开时如何触发事件。

Answer 1

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

uib-accordion[-group]指令具有toggleOpen()作用域功能。所以你不能从外部控制器改变它。
让我们覆盖template - 手风琴需要template-url。从以下原始模板中获取： https://github.com/angular-ui/bootstrap/blob/master/template/accordion/accordion-group.html 并创建自己的
从根toggleOpen()和<div>标记中删除<a>。

uib-accordion-heading

，使用your controller function - ie) myToggleOpen(myIsOpenModel)绑定点击/按键事件，确保您的标题涵盖整个部分
在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>

打开uib-accordion时的触发事件

1 个答案: