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

发布时间：2020-12-17 08:06:58 所属栏目：安全来源：网络整理

导读：我正在使用 http://angular-ui.github.com/bootstrap/年的手风琴指令，我需要更多地控制手风琴何时开启和关闭。为了更准确地说，我需要一个手风琴组内的按钮，将关闭其手风琴并打开下一个按钮(所以基本上模仿如果关闭对方设置为true，点击下一个标题会做什

我正在使用 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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!