什么是编程控制角度的UI手风琴的好办法？ [英] What's a good way to control an angular-ui accordion programmatically?

问题描述

我是用手风琴指令从 http://angular-ui.github.com/bootstrap/ 并我需要有过的时候更多的控制手风琴的开启和关闭。

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.

要更precise我需要手风琴组内一个按钮，将关闭其母公司手风琴，并打开下一个（所以基本上模仿什么，如果近距离别人设置为true点击下一个头会做） 。
我也需要做一些验证之前，我可以允许手风琴被关闭，下一个要开了，我也需要这样组装起来点击Accordion标题的事件。

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.

我是pretty新的角度，我们目前正在重写从骨干+ jQuery来角的应用程序。在主干版本我们使用Twitter的引导手风琴，我们打开和使用JQuery关闭它们。虽然我们仍然可以继续这样做，我宁愿摆脱JQuery的DOM操作完全，所以我想找一个纯粹的角度解决这个。

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

和在我的控制器

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

这显然为DOM元素被替代的指令，并且从未被添加点击处理程序没有奏效。我已经打算在源$ C ​​$ C（并发现了一些很不错的未记录的功能），但我茫然了，其中甚至开始解决这个特定的挑战。我正在考虑分叉角度的用户界面，并尝试添加此功能手风琴指令，但如果我能做到这一点，而无需修改指令，将是一个要好很多。

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.

推荐答案

有是是开放在手风琴组属性指向一个绑定前pression。通过使用这种前pression可以控制手风琴项目编程，例如：

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>

和这里的工作普拉克： http://plnkr.co/edit/DepnVH?p=$p $ PVIEW

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

这篇关于什么是编程控制角度的UI手风琴的好办法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！