Angular Ui.bootstrap fisarmonica e bootstrap3

Question

Ne sono ben consapevole ui.bootstrap Non è ancora completamente portato su Bootstrap 3, ma ho costruito la maggior parte della mia app usandola e non posso semplicemente tornare a 2.3 solo per questo componente.

Detto questo, sto valutando le mie possibilità.

Quello che ho provato finora:

1. Ritorna a Bootstrap 2.3
   Ho rotto tutti i miei stili ... in nessun modo

2. Attenersi a BS3 e prendere la fisarmonica da https://github.com/angular-ui/bootstrap/tree/bootstrap3
   Ho provato a includere il codice sotto l'interfaccia utente.bootstrap_0.7 Lib, ho sostituito il codice fisarmonica nel codice UI.bootstrap 0.7 e rimosso e messo completamente in un altro file. Niente di tutto ciò ha funzionato

3. Attenersi a BS3 e ha cercato di rubare gli stili di fisarmonica da BS2.3
   In questo modo sono riuscito ad aggiungere uno stile ad esso, ma il comportamento della fisarmonica semplicemente non funzionava

In ogni singolo tentativo, non viene mostrato alcun errore sulla console ...

Sto vagando al buio, senza alcun indizio su come includere la fisarmonica nel mio codice senza reimplementarla di nuovo.
Qualsiasi aiuto sarà molto apprezzato, grazie!

Answer 1

Bootstrap 3 utilizza pannelli invece della classe di fisarmonica. Il modello dovrebbe cambiare per questo. Non per cambiare UI-bootstrap, ho sovrascritto il modulo che ha il modello per la fisarmonica. Questo modulo dovrebbe essere aggiunto alla tua classe JS (e dovrebbe caricare dopo 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>");
}]);

Trova questo campione in Plunk

Answer 2

devi fare riferimento solo al file "UI-bootstrap-tpls.js"

Questo era almeno il mio caso, mi riferivo sia in questo ordine:

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

e la "bootstrap" era sovraccarica dei modelli

Answer 3

MLIM1972 Le risposte funzionano bene, tuttavia ho usato Angular $ Fornire decoratore per farlo (a CoffeeScript):

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