角的ui。引导手风琴和bootstrap3

I'm well aware that ui.bootstrap is not yet fully ported on bootstrap 3, but I have built most of my app using it, and I can't simply go back to 2.3 just for this component.

我很清楚这个ui。bootstrap还没有完全移植到bootstrap 3上，但是我已经使用它构建了我的大部分应用程序，我不能仅仅为了这个组件返回到2.3。

That said, I'm evaluating my possibilities.

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

What I have tried so far:

到目前为止我所尝试的:

Revert to Bootstrap 2.3
Broke all my stylings... no way

还原到Bootstrap 2.3破坏了我所有的风格……没有办法
Stick to BS3 and grab the accordion from https://github.com/angular-ui/bootstrap/tree/bootstrap3
I've either tried to include the code below the ui.bootstrap_0.7 lib, replaced the accordion code in ui.bootstrap 0.7 code and removed it and placed it in another file entirely. None of this have worked

坚持使用BS3并从https://github.com/angular-ui/bootstrap/tree/bootstrap3获取手风琴导航，我已经尝试在ui中包含ui.bootstrap_0.7 lib下面的代码，替换了手风琴代码。引导0.7代码，并删除它，并把它完全放在另一个文件中。这些都没有奏效
Stick to BS3 and tried to steal the accordion styles from BS2.3
This way I've managed to add a style to it, but the accordion behavior simply wasn't working

坚持使用BS3并尝试从BS2.3中偷取手风琴样式，这样我就添加了一个样式，但是手风琴行为根本不起作用

In every single try, no error is shown on the console...

在每次尝试中，控制台不会显示错误……

I'm wandering in the dark, with no clue on how to include the accordion in my code without re-implementing it anew.
Any help will be much appreciated, thanks!

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

3 个解决方案

#1

Bootstrap 3 uses panels instead of the accordion class. The template should change for that. Not to change ui-bootstrap, I overwrote the module that has the template for the accordion. This module should be added to your js class (and should load after ui-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>");
}]);

Find this sample in plunk

在扑通一声中找到这个样本

#2

you have to reference only the "ui-bootstrap-tpls.js" file

您必须只引用“ui-bootstrap-tpls”。js”文件

that was my case at least, i was referencing both in this order:

至少这是我的情况，我是按以下顺序提到这两件事的:

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

and the "ui-bootstrap" was overriding the templates

“ui-bootstrap”覆盖了模板

#3

mlim1972 answers work well, however i used angular $provide decorator to do that(in coffeescript):

mlim1972的答案很好，但是我使用了$provide decorator(在coffeescript中):

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

#1

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