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>");
}]);

在plunk中找到此样本

Answer 2

您只需要引用“ ui-bootstrap-tpls.js”文件

至少是我的情况，我以这种顺序引用了两个：

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

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

Answer 3

mlim1972的答案很好用，但是我用了$ provide的装饰器来做到这一点（在coffeescript中）：

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