angularjs – 以编程方式控制角度手风琴的好方法是什么?

我正在使用http://angular-ui.github.com/bootstrap/年的手风琴指令,我需要更多地控制手风琴何时开启和关闭。

为了更准确地说,我需要一个手风琴组内的按钮,将关闭其手风琴并打开下一个按钮(所以基本上模仿如果关闭对方设置为true,点击下一个标题会做什么)。
我还需要做一些验证,然后才能允许手风琴被关闭,下一个可以打开,我还需要连接到手风琴头上的点击事件。

我很新颖,我们正在将一个应用程序从Backbone JQuery重写为Angular。在Backbone版本中,我们使用Twitter Bootstrap手风琴,我们使用JQuery打开和关闭它们。虽然我们仍然可以继续这样做,我宁可完全摆脱JQuery DOM操作,所以我正在寻找一个纯粹的角度解决方案。

我试图在验证方面做的是

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

并在我的控制器

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

这显然不起作用,因为DOM元素被指令替换,并且从未添加点击处理程序。我一直在浏览源代码(并发现了一些非常好的非文档功能),但是我甚至在哪里甚至开始解决这个具体的挑战。我正在考虑为角色扮演角色,并尝试将此功能添加到手风琴指令中,但如果我可以实现这一点,而不修改将更好的指令。

最佳答案
手风琴组上的is-open属性指向可绑定表达式。通过使用此表达式,您可以以程序方式控制手风琴项目,例如:

<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>

这里的工作繁忙:http://plnkr.co/edit/DepnVH?p=preview

转载注明原文:angularjs – 以编程方式控制角度手风琴的好方法是什么? - 代码日志