Angular UI.Bootstrap Accordion und Bootstrap3

Question

Das ist mir gut bewusst, dass ui.bootstrap ist noch nicht vollständig auf Bootstrap 3 portiert, aber ich habe den größten Teil meiner App mit ihr erstellt, und ich kann nicht einfach auf 2.3 zurückkehren, nur für diese Komponente.

Das heißt, ich bewerten meine Möglichkeiten.

Was ich bisher versucht habe:

1. Zurück zu Bootstrap 2.3 zurückkehren
   Brach alle meine Stile ... auf keinen Fall

2. Halten Sie sich an BS3 und schnappen Sie sich das Akkordeon von https://github.com/angular-ui/bootstrap/tree/bootstrap3
   Ich habe entweder versucht, den Code unter die UI.bootstrap_0.7 lib hinzuzufügen, den Akkordeoncode in UI.bootstrap 0.7 -Code zu ersetzen, ihn entfernt und in einer anderen Datei vollständig platziert. Nichts davon hat funktioniert

3. Halten Sie sich an BS3 und versuchten, die Akkordeonstile aus BS2.3 zu stehlen
   Auf diese Weise habe ich es geschafft, ihm einen Stil hinzuzufügen, aber das Akkordeonverhalten funktionierte einfach nicht

In jedem einzelnen Versuch wird auf der Konsole kein Fehler angezeigt ...

Ich wandere im Dunkeln und ohne Hinweis darauf, wie ich das Akkordeon in meinen Code einbeziehen kann, ohne es neu zu implementieren.
Jede Hilfe wird sehr geschätzt, danke!

Answer 1

Bootstrap 3 verwendet Panels anstelle der Akkordeonklasse. Die Vorlage sollte sich dafür ändern. Um die Ui-Bootstrap nicht zu ändern, habe ich das Modul, das die Vorlage für das Akkordeon enthält, überschrieben. Dieses Modul sollte Ihrer JS-Klasse hinzugefügt werden (und nach Ui-Bootstrap laden):

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

Finden Sie diese Probe in zupfen

Answer 2

Sie müssen Verweisen Sie nur auf die Datei "ui-Bootstrap-tpls.js"

Das war zumindest mein Fall, ich habe beide in dieser Reihenfolge bezogen:

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

und die "Ui-Bootstrap" überschrieben die Vorlagen

Answer 3

MLIM1972 Antworten funktionieren gut, aber ich habe Angular $ zur Verfügung gestellt, um dies zu tun (in Coffeescript):

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