Angular UI.Bootstrap Accordion y Bootstrap3

Question

Soy muy consciente de que ui.bootstrap Todavía no está completamente portado en Bootstrap 3, pero he construido la mayor parte de mi aplicación usándola, y no puedo volver a 2.3 solo para este componente.

Dicho esto, estoy evaluando mis posibilidades.

Lo que he probado hasta ahora:

1. Volver a Bootstrap 2.3
   Rompió todos mis estilos ... de ninguna manera

2. Pegarse a BS3 y tomar el acordeón de https://github.com/angular-ui/bootstrap/tree/bootstrap3
   O intenté incluir el código debajo del UI.Bootstrap_0.7 lib, reemplazé el código de acordeón en el código UI.Bootstrap 0.7 y lo eliminé y lo coloqué en otro archivo por completo. Nada de esto ha funcionado

3. Pegue a BS3 e intentó robar los estilos de acordeón de BS2.3
   De esta manera, he logrado agregarle un estilo, pero el comportamiento del acordeón simplemente no estaba funcionando

En cada intento, no se muestra ningún error en la consola ...

Estoy deambulando en la oscuridad, sin idea de cómo incluir el acordeón en mi código sin volver a implementarlo de nuevo.
Cualquier ayuda será muy apreciada, ¡gracias!

Answer 1

Bootstrap 3 usa paneles en lugar de la clase de acordeón. La plantilla debería cambiar para eso. Para no cambiar UI-Bootstrap, sobrescribí el módulo que tiene la plantilla para el acordeón. Este módulo debe agregarse a su clase JS (y debe cargarse después de 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>");
}]);

Encuentra esta muestra en ruido sordo

Answer 2

tienes que Referencia solo el archivo "ui-bootstrap-tpls.js"

Ese era mi caso al menos, estaba haciendo referencia a ambos en este orden:

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

y el "ui-bootstrap" estaba anulando las plantillas

Answer 3

MLIM1972 Las respuestas funcionan bien, sin embargo, utilicé Angular $ proporcionando decorador para hacerlo (en Coffeescript):

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