以编程方式控制angular-ui手风琴的好方法是什么？

Question

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

更确切地说,我需要一个手风琴组内的按钮,它将关闭其母手风琴并打开下一个手风琴(所以基本上模仿如果close-others设置为true,点击下一个标题会做什么).我还需要做一些验证才能允许关闭手风琴并打开下一个,我还需要将其连接到手风琴标题上的单击事件.

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

我在验证方面尝试做的是

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

在我的控制器里

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

这显然不起作用,因为DOM元素被指令替换,并且从不添加点击处理程序.我一直在浏览源代码(并找到了一些非常好的无记录功能),但我甚至不知道在哪里开始解决这个特定的挑战.我正在考虑分配angular-ui并尝试将此功能添加到accordion指令中,但如果我能够在不修改指令的情况下实现这一点,那将会更好.

Answer 1

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

<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

Answer 2

对于@ pkozlowski.opensource的解决方案不起作用的人(例如我),您可以强制组件接受将关闭它的CSS(没有转换).

理论:角度指令主要扩展为标准HTML,div元素,其中CSS样式赋予手风琴外观.带有类的div .panel-collapse是accordion-group元素的主体.您可以从交换的第二类.in以.collapse如下图所示的几个其他更改一起.

代码:

$scope.toggleOpen = function(project) {

        var id = '<The ID of the accordion-group you want to close>';
        var elements = angular.element($document[0].querySelector('#'+id));
        var children = elements.children();

        for(var i = 0; i < children.length; i++) {

            var child = angular.element(children[i]);

            if(child.hasClass('panel-collapse')) {
                if(child.hasClass('in')) { // it is open
                    child.removeClass('in');
                    child.addClass('collapse');
                    child.css('height', '0px');
                } else { // it is closed
                    child.addClass('in');
                    child.removeClass('collapse');
                    child.css('height', 'auto');
                }

            }
        }
    };

正如我们所说的Angular,你很可能通过ng-repeat标签生成手风琴.在这种情况下,您还可以为以下元素生成id:

<accordion-group ng-repeat="user in users"
                 is-disabled="user.projects.length == 0"
                 id="USER{{user._id}}">

鉴于Mongoose模型用户,请注意我提供的ID不是,user._id但前面附加了"USER".这是因为Mongoose可能会生成以数字方式启动的id,而querySelector不喜欢它;-) go figure!