javascript - 为 Angular JS 折叠 Bootstrap DIV 设置默认打开状态？

Question

我有一个针对 Angular JS 改编的 Bootstrap 折叠 div:

<fieldset>
  <legend data-toggle="collapse" data-target="#radios" class="data-toggle" collapse>Radio Buttons</legend>
    <div id="radios" class="panel-collapse collapse">
    <!-- add class "collapse" to start out closed -->
    <div class="panel-body">
        ...stuff...
    </div>
  </div>
</fieldset>

在面板上设置类 collapse 以使其开始关闭(如此处)或省略它以使其开始打开。

我写了这个指令来切换被点击的元素的类别，显示“打开”或“关闭”图标:

'use strict';

angular.module('designSystemApp')
  .directive('collapse', function() {
    return {
        restrict: 'A',
        link: function postLink(scope, element, attrs) {

            element.on({
                click: function(e) {
                    element.toggleClass('open');
                }
            });
        }
    }
});

它像这样工作得很好，当它开始关闭并切换打开和关闭时。

由于 BS 方法是在子对象(面板)上设置类，我不确定如何影响 Angular 触发器对象，因此更改该类会将状态/类设置为“打开”开始。

换句话说，如果我删除了 div 开始打开的类，但是 legend 没有打开的类，所以图标是“关闭的”。我试图避免设置两件事；正在寻找一种将默认设置为打开或关闭的简单方法。

Answer 1

虽然没有直接回答，但为您提供了一个可能的解决方法/解决方案来解决您的问题，我正在使用 angular-bootstrap 库为此和其他 Bootstrap 控件执行类似的任务。图书馆可以找到here

适用于您的用例的折叠插件示例:

<fieldset>
  <legend ng-click="isCollapsed = !isCollapsed">Radio Buttons</legend>
  <div id="radios" class="panel-collapse" collapse="isCollapsed">
    <div class="panel-body">
        ...stuff...
    </div>
  </div>
</fieldset>

然后在您的 Angular Directive(指令)或 Controller 中，您可以设置 isCollapsed = true 或 false，具体取决于您希望它在默认情况下是打开还是关闭。