Question

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

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

到目前为止我尝试过：

恢复到Bootstrap 2.3
打破了我的所有风格......没办法
坚持BS3并从https://github.com/angular-ui/bootstrap/tree/bootstrap3 中抓取手风琴我或者试图在ui.bootstrap_0.7 lib下面包含代码，替换ui.bootstrap 0.7代码中的accordion代码并将其删除并完全放入另一个文件中。这些都没有效果
坚持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答案效果很好，但是我使用了角度$提供装饰来做到这一点（在coffeescript中）：

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

Angular ui.bootstrap手风琴和bootstrap3

3 个答案: