在angularjs頁面上使用bootstrap手風琴

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使用＃作為例程的錨點，當我點擊切換我的手風琴時，它會將我重定向到我的主頁。 有什么方法可以阻止這個嗎？

ps：我知道有一個用於angularjs的庫ui-bootstrap，帶有一個處理手風琴的指令，我只是想知道是否有辦法解決我的問題而沒有它:)。

Answer 1

如果你想要一個沒有編寫自己的指令或使用BootstrapUI的快速輕微hacky方式，你可能繞過引導jQuery方式切換手風琴並將angular指令放入標記：

<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>

如果從正文包裝中刪除的collapse類除了顯示/隱藏之外還可以執行任何操作，則可能需要一些輕微的CSS