Ui.Bootstrap acordeão angular e bootstrap3

Question

Estou bem ciente disso ui.bootstrap Ainda não está totalmente portado no Bootstrap 3, mas eu criei a maior parte do meu aplicativo usando -o e não posso simplesmente voltar para 2.3 apenas para este componente.

Dito isto, estou avaliando minhas possibilidades.

O que eu tentei até agora:

1. Reverter para o Bootstrap 2.3
   Quebrou todos os meus estilos ... de jeito nenhum

2. Atenha -se ao BS3 e pegue o acordeão de https://github.com/angular-ui/bootstrap/tree/bootstrap3
   Eu tentei incluir o código abaixo do UI.BOOTSTRAP_0.7 LIB, substituí o código do acordeão no código UI.BootStrap 0.7 e o removi e o coloquei em outro arquivo completamente. Nada disso funcionou

3. Atenha -se ao BS3 e tentou roubar os estilos de acordeão da BS2.3
   Dessa forma, consegui adicionar um estilo a ele, mas o comportamento do acordeão simplesmente não estava funcionando

Em cada tentativa, nenhum erro é mostrado no console ...

Estou vagando no escuro, sem idéia de como incluir o acordeão no meu código sem reimplementá-lo novamente.
Qualquer ajuda será muito apreciada, obrigado!

Answer 1

O Bootstrap 3 usa painéis em vez da classe de acordeão. O modelo deve mudar para isso. Para não alterar o Ui-Bootstrap, substituo o módulo que possui o modelo para o acordeão. Este módulo deve ser adicionado à sua classe JS (e deve carregar após a 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>");
}]);

Encontre esta amostra em Plunk

Answer 2

você tem que Referência apenas o arquivo "Ui-Bootstrap-tpls.js"

Esse foi o meu caso, pelo menos, eu estava referenciando ambos nesta ordem:

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

E o "Ui-Bootstrap" estava substituindo os modelos

Answer 3

As respostas do MLIM1972 funcionam bem, no entanto, usei $ angular fornece decorador para fazer isso (no CoffeeScript):

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