Question

我的网络应用程序上有一个Bootstrap手风琴没有按照我想要的方式操作，我正在传递动态数据，如果你知道手风琴的使用情况，你必须提供data-target或href属性到它，然后div id到面板主体的父元素。

好的看看我的代码：

  <div class="panel panel-default" ng-repeat="sport in sports">
    <div class="panel-heading" ng-click="addSportToLines(sport)"
      data-toggle="collapse"
      data-parent="#accordion"
      data-target="{{sport.id}}">
      <h4 class="panel-title">
        <a>
          {{::sport.name }}
        </a>
      </h4>
    </div>
    <div id="{{sport.id}}" class="panel-collapse collapse" role="tabpanel">
      <div class="panel-body">
        <div class="list-group leagues-margin"
          class="list-group-item"
          ng-repeat="league in sport.leagues"
          ng-click="addLeagueToLines(league)">{{:: league.name}}
        </div>
      </div>

在这种情况下，{{sport.id}}是data-target，与id的父元素上的.panel-body相同，如果我将Inspect Element打开在我的浏览器中，每个元素都会出现一个不同且独特的id，这就是为什么我在这里问这个问题，这很奇怪，因为一切似乎都是正确的，但我手风琴的行为并不合适。手风琴没有打开面板。那你有什么建议？

第二个问题：我正在使用Angular-Strap并且项目已经完成，我即将完成所以我无法切换到Angular Bootstrap UI，是否有一种方法可以添加Angular Bootstrap UI而不会与Angular发生任何冲突-Strap？我昨天试过，但是出现了一些冲突，我需要的是来自Angular Bootstrap UI的手风琴/崩溃插件，我之所以没有使用Angular-Strap崩溃，是因为插件没有我正在寻找的行为对于。

Answer 1

tldr;切勿将原始bootstrap.js与angular混合使用，而是使用一些实现bootstrap小部件的角度模块。

看起来您正在将自举原始组件与角度混合。你不能这样做，我的意思是，如果你使用angular，你不能让任何其他库操作DOM，除非你在一个指令中包装DOM操作。

有一些角度模块实现了bootstrap组件的行为。我使用UI Bootstrap。

具有动态数据的Bootstrap手风琴无法正常工作

1 个答案: