Angular ui.bootstrap 手风琴和 bootstrap3

Question

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

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

到目前为止我已经尝试过：

1. 恢复到 Bootstrap 2.3
   打破了我所有的造型决不

2. 坚持 BS3 并抓住手风琴 https://github.com/angular-ui/bootstrap/tree/bootstrap3
   我要么尝试将代码包含在 ui.bootstrap_0.7 库下面，替换 ui.bootstrap 0.7 代码中的手风琴代码，然后将其删除并将其完全放入另一个文件中。这些都不起作用

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

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

我在黑暗中徘徊，不知道如何将手风琴包含在我的代码中而不重新重新实现它。
任何帮助将不胜感激，谢谢！

Answer 1

Bootstrap 3 使用面板而不是折叠类。模板应该为此改变。为了不更改 ui-bootstrap，我覆盖了具有手风琴模板的模块。该模块应该添加到您的 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>");
}]);

找到这个样本 砰的一声

Answer 2

你必须 仅引用“ui-bootstrap-tpls.js”文件

至少这是我的情况，我按以下顺序引用两者：

ui-bootstrap-tpls.js
ui-bootstrap.js

并且“ui-bootstrap”覆盖了模板

Answer 3

mlim1972 答案效果很好，但是我使用 Angular $provide 装饰器来做到这一点（在咖啡脚本中）：

module.config( ["$provide", ($provide) ->
  $provide.decorator 'accordionDirective', ["$delegate", ($delegate) ->
  $delegate[0].templateUrl = "path/to/modified/accordion-group.html"
  $delegate
]