在 Angular 中处理手风琴的打开/折叠事件 [英] Handle open/collapse events of Accordion in Angular

问题描述

如果我有这个代码:

<accordion-group heading="{{group.title}}" ng-repeat="group in groups">
      {{group.content}}
</accordion-group>

使用 AngularJS、angular-ui 和 Twitter Bootstrap，是否可以让手风琴在打开时调用一些动作?我知道我不能简单地添加 ng-click，因为它在编译"为 HTML 以打开/折叠组后已经使用了.

Using AngularJS, angular-ui and Twitter Bootstrap, is it possible to make the accordion call some action when opened? I know I can't simply add ng-click, because that is already used after it's "compiled" to HTML for opening/collapsing of the group.

推荐答案

在手风琴组上有 is-open 属性，它指向一个可绑定的表达式.您可以观察这个表达式并在给定的手风琴组打开时执行一些逻辑.使用此技术，您可以将标记更改为:

There is the is-open attribute on the accordion-group which points to a bindable expression. You could watch this expression and execute some logic when a given accordion group is open. Using this technique you would change your markup to:

<accordion-group ng-repeat="group in groups" heading="{{group.title}}" is-open="group.open">
   {{group.content}}
</accordion-group>

以便您可以在控制器中准备所需的监视表达式:

so that you can, in the controller, prepare a desired watch expression:

$scope.$watch('groups[0].open', function(isOpen){
    if (isOpen) {
      console.log('First group was opened'); 
    }    
  });

虽然上述工作在实践中使用可能有点麻烦，所以如果你觉得这可以改进，请在 中打开一个问题https://github.com/angular-ui/bootstrap

While the above works it might be a bit cumbersome to use in practice so if you feel like this could be improved open an issue in https://github.com/angular-ui/bootstrap

这篇关于在 Angular 中处理手风琴的打开/折叠事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！