在 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屋!