手风琴内的 Angular UI 手风琴答案

【问题标题】：Angular UI accordion within an accordion手风琴内的 Angular UI 手风琴
【发布时间】：2015-07-29 04:55:31
【问题描述】：

在 Angular UI 中有没有一种方法可以在手风琴中加入手风琴？我希望在选择一个项目之前全部关闭顶级列表，然后打开手风琴以显示另一个也将打开和关闭的手风琴列表。

在我当前的实现中，当我选择内部列表项时，两个手风琴都会被触发，而内部的手风琴则关闭。他们不是在自己的 $scope 中吗？

这个问题类似，但是对于 jQuery：accordion within accordion collapses parent accordion

<accordion>
  <accordion-group ng-repeat="folder in folders | orderBy:'name' " ng-click="select_folder(folder)">
    <accordion-heading>
      {{ folder.name }}
    </accordion-heading>
    <accordion>
      <accordion-group ng-repeat="file in folder.files">
        <accordion-heading>
          {{ file.name }}
        </accordion-heading>
        {{ file.info }}
      </accordion-group>
    </accordion>
  </accordion-group>
</accordion>

【问题讨论】：

这听起来可能很愚蠢，但请尝试将ng-if="true" 添加到内部accordion-group。 ng-if 将强制一个新的隔离范围（这是一个 hacky 的副作用）。这不是一个解决方案，但如果它有效，它就是问题的线索，然后可能是一个好的解决方案。
另一个可能适合您但不完全符合您要求的选项是将每个手风琴上的 close-others 设置为 false。
更新：我很确定这与范围无关。 Accordions 将其手风琴组数组存储在 AccordionController 中声明的局部变量中。
那么听起来可以嵌套手风琴列表。
似乎应该是可能的。我不知道为什么它不起作用。我查看了 github 上的手风琴代码，没有任何一个明确的解释。如果你创建一个 Plunkr，我会进一步研究它。我也很好奇。

标签： angularjs accordion

【解决方案1】：

我想我找到了问题所在。 <accordion-group> 标签上不应有 ng-click 属性。通过将其移至<accordion-heading> 标记，嵌套的手风琴可以正常工作。这也在这里讨论：https://stackoverflow.com/a/18497935/584846

<accordion>
  <accordion-group ng-repeat="folder in folders | orderBy:'name' ">
    <accordion-heading>
      <span ng-click="select_folder(folder)">{{ folder.name }}</span>
    </accordion-heading>
    <accordion>
      <accordion-group ng-repeat="file in folder.files">
        <accordion-heading>
          <span ng-click="select_folder(folder)">{{ file.name }}</span>
        </accordion-heading>
        {{ file.info }}
      </accordion-group>
    </accordion>
  </accordion-group>
</accordion>

另一种方法是$watch is-open 属性中的值：https://stackoverflow.com/a/15642577/584846

【讨论】：