javascript - 在 angularjs 页面上使用 Bootstrap Accordion

Question

当我尝试在 AngularJS 页面中运行以下代码时遇到问题。

      <div class='panel-group' id=accordion'>
        <div class="panel panel-default">
          <h4 class="panel-title">
            <a data-toggle='collapse' data-parent='#accordion' href='#collapseOne'>foo</a>
          </h4>
          <div id='collapseOne' class='panel-collapse collapse'>
            <div class='panel-body'>
              <p>foo</p>
            </div>
          </div>
        </div>
      </div>

代码是正确的，但由于 Angular 使用 # 作为例程的 anchor ，当我点击切换 Accordion 时，它会将我重定向到我的主页。有什么办法可以防止这种情况发生吗？

ps:我知道有一个用于 angularjs 的 ui-bootstrap 库带有处理 Accordion 的指令，我只是想知道没有它是否有办法解决我的问题:)。

Answer 1

如果您想要一种快速且略显笨拙的方式，而不需要编写自己的指令或使用 BootstrapUI，您或许可以绕过 bootstrap jQuery 切换 Accordion 的方式，而是将 Angular Directive(指令)放入标记中:

<div class='panel-group' id=accordion'>
    <div class="panel panel-default">
        <h4 class="panel-title">
            <a data-ng-click="accordion1 = !accordion1">foo</a>
        </h4>
        <div data-ng-show="accordion1">
            <div class='panel-body'>
                <p>foo</p>
            </div>
        </div>
    </div>
</div>

如果从 body wrapper 中删除的 collapse 类除了显示/隐藏之外还可以执行任何操作，则可能需要一些小的 css