javascript - Angular ui.bootstrap Accordion 和 bootstrap3

Question

我很清楚 ui.bootstrap尚未完全移植到 bootstrap 3，但我已经使用它构建了我的大部分应用程序，我不能仅仅为了这个组件简单地回到 2.3。

也就是说，我正在评估我的可能性。

到目前为止我尝试了什么:

1. 恢复到 Bootstrap 2.3
   打破了我所有的造型……没门

2. 坚持 BS3 并从 https://github.com/angular-ui/bootstrap/tree/bootstrap3 获取 Accordion
   我要么尝试将代码包含在 ui.bootstrap_0.7 lib 下，替换 ui.bootstrap 0.7 代码中的 Accordion 代码并将其删除并将其完全放在另一个文件中。这些都没有用

3. 坚持 BS3 并试图从 BS2.3 窃取 Accordion 风格
   通过这种方式，我设法为其添加了样式，但 Accordion 行为根本不起作用

在每一次尝试中，控制台上都没有显示错误...

我在黑暗中徘徊，不知道如何在我的代码中包含 Accordion 而不重新实现它。
非常感谢任何帮助，谢谢!

Answer 1

Bootstrap 3 使用面板而不是 Accordion 类。模板应该为此改变。为了不更改 ui-bootstrap，我覆盖了具有 Accordion 模板的模块。这个模块应该添加到你的 js 类中(并且应该在 ui-bootstrap 之后加载):

angular.module("template/accordion/accordion-group.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/accordion/accordion-group.html",
    "<div class=\"panel panel-default\">\n" +
    "  <div class=\"panel-heading\" >\n" +
    "    <h4 class=\"panel-title\"><a data-toggle=\"collapse\" ng-click=\"isOpen = !isOpen\" accordion-transclude=\"heading\">{{heading}}</a></h4>\n" +
    "  </div>\n" +
    "  <div class=\"panel-collapse\" ng-hide=\"!isOpen\">\n" +
    "    <div class=\"panel-body\" ng-transclude></div>  </div>\n" +
    "</div>");
}]);

angular.module("template/accordion/accordion.html", []).run(["$templateCache", function($templateCache) {
  $templateCache.put("template/accordion/accordion.html",
    "<div class=\"panel-group\" ng-transclude></div>");
}]);

在 plunk 中找到此示例