以编程方式控制 angular-ui 手风琴的好方法是什么? [英] What's a good way to control an angular-ui accordion programmatically?

问题描述

我正在使用 http://angular-ui.github.com/bootstrap/ 中的手风琴指令和我需要更好地控制手风琴的打开和关闭时间.

更准确地说，我需要在手风琴组内有一个按钮，该按钮将关闭其父手风琴并打开下一个手风琴(因此基本上模仿了如果 close-others 设置为 true，则单击下一个标题会执行的操作).我还需要做一些验证，然后才能允许关闭手风琴并打开下一个手风琴，我还需要将其连接到手风琴标题上的点击事件.

我对 angular 很陌生，我们目前正在将应用程序从 Backbone+JQuery 重写为 Angular.在 Backbone 版本中，我们使用 Twitter Bootstrap 手风琴，我们使用 JQuery 打开和关闭它们.虽然我们仍然可以继续这样做，但我宁愿完全摆脱 JQuery DOM 操作，所以我正在寻找一个纯角度的解决方案.

我在验证方面尝试做的是

在我的控制器中

 event.preventDefault();event.stopPropagation();

这显然不起作用，因为 DOM 元素被指令替换，并且从未添加点击处理程序.我一直在查看源代码(并发现了一些非常好的未记录的功能)，但我什至不知道从哪里开始解决这个特定的挑战.我正在考虑分叉 angular-ui 并尝试将此功能添加到手风琴指令中，但如果我可以在不修改指令的情况下实现这一点，那就更好了.

解决方案

accordion-group 上有一个 is-open 属性，它指向一个可绑定的表达式.通过使用此表达式，您可以以编程方式控制手风琴项目，例如:

<手风琴><accordion-group ng-repeat="group in groups" Heading="{{group.title}}" is-open="group.open">{{group.content}}</accordion-group></手风琴><button class="btn" ng-click="groups[0].open = !groups[0].open">切换第一次打开</button><button class="btn" ng-click="groups[1].open = !groups[1].open">切换第二个打开</button>

和这里的工作插件:http://plnkr.co/edit/DepnVH?p=预览

I am using the accordion directive from http://angular-ui.github.com/bootstrap/ and I need to have more control over when the accordions open and close.

To be more precise I need a button inside the accordion-group that will close its parent accordion and open the next one (so basically mimic what clicking the next header would do if close-others was set to true). I also need to do some validation before I can allow an accordion to be closed and the next one to be opened, and I also need to wire this up to click events on the accordion headers.

I am pretty new to angular and we're currently rewriting an application from Backbone+JQuery to Angular. In the Backbone-version we were using Twitter Bootstrap accordions and we were opening and closing them using JQuery. While we can still keep doing this I would rather get rid of JQuery DOM manipulation completely so I am looking for a pure angular solution to this.

What I've tried to do in terms of validation is

<accordion-group ng-click="close($event)">

and in my controller

    event.preventDefault();
    event.stopPropagation();

This obviously did not work as the DOM element is replaced by the directive and the click-handler is never added. I've been going over the source code (and found a few very nice undocumented features) but I'm at a loss over where to even begin solving this specific challenge. I was considering forking angular-ui and try to add this functionality to the accordion directive but if I can achieve this without modifying the directive that would be a lot nicer.

解决方案

There is the is-open attribute on the accordion-group which points to a bindable expression. By using this expression you can control accordion items programatically, ex.:

<div ng-controller="AccordionDemoCtrl">
  <accordion>
    <accordion-group ng-repeat="group in groups" heading="{{group.title}}" is-open="group.open">
      {{group.content}}
    </accordion-group>    
  </accordion>
  <button class="btn" ng-click="groups[0].open = !groups[0].open">Toggle first open</button>
  <button class="btn" ng-click="groups[1].open = !groups[1].open">Toggle second open</button>
</div>

and the working plunk here: http://plnkr.co/edit/DepnVH?p=preview

这篇关于以编程方式控制 angular-ui 手风琴的好方法是什么?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！