Angular ui.bootstrap accordion and bootstrap3

Question

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.

That said, I'm evaluating my possibilities.

What I have tried so far:

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

2. 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

3. 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

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!

Answer 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):

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

Answer 2

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

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

Answer 3

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

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