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元素被指令替换，并且从不添加click-handler。我一直在浏览源代码（并找到了一些非常好的无记录功能），但我甚至不知道在哪里开始解决这个特定的挑战。我正在考虑分配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（没有转换）。

理论： angular指令主要扩展为标准HTML，div元素，其中CSS样式赋予它手风琴的外观。类.panel-collapse的div是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！

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

2 个答案: