16

我正在使用来自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 并尝试将此功能添加到手风琴指令中，但如果我可以在不修改指令的情况下实现这一点，那就更好了。

4

2 回答 2

25

有指向可绑定表达式的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>

和这里的工作plunk：http://plnkr.co/edit/DepnVH? p =preview

于 2013-03-22T12:38:26.327 回答
5

对于@pkozlowski.opensource 的解决方案不起作用的人（例如我），您可以强制组件接受将关闭它的CSS（即没有过渡）。

理论： angular 指令被扩展为标准的 HTML，主要是 div 元素，其中 CSS 样式赋予它手风琴的外观。带类的 div.panel-collapse是手风琴组元素的主体。您可以将其第二类从更改.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 不喜欢这样 ;-) 看图！

于 2015-09-16T18:05:22.667 回答