Mir ist klar, dass ui.bootstrap noch nicht vollständig auf Bootstrap 3 portiert ist, aber ich habe den größten Teil meiner App damit erstellt, und ich kann nicht einfach nur für diese Komponente zu 2.3 zurückkehren.

Trotzdem bewerte ich meine Möglichkeiten.

Was ich bisher ausprobiert habe:

  1. Zurück zu Bootstrap 2.3
    Brach alle meine Stylings ... auf keinen Fall

  2. Halten Sie sich an BS3 und holen Sie sich das Akkordeon von https://github.com/angular- ui / bootstrap / tree / bootstrap3
    Ich habe entweder versucht, den Code unter der Bibliothek ui.bootstrap_0.7 einzufügen, den Akkordeoncode im Code ui.bootstrap 0.7 ersetzt und ihn entfernt und vollständig in eine andere Datei eingefügt. Nichts davon hat funktioniert

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

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

Ich wandere im Dunkeln und habe keine Ahnung, wie ich das Akkordeon in meinen Code aufnehmen kann, ohne es erneut zu implementieren.
Jede Hilfe wird sehr geschätzt, danke!

2
domokun 3 Dez. 2013 im 18:30

3 Antworten

Beste Antwort

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

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 dieses Beispiel in plunk

2
mlim1972 12 Dez. 2013 im 08:29

Sie müssen nur auf die Datei "ui-bootstrap-tpls.js" verweisen

Das war zumindest mein Fall, ich bezog mich auf beide in dieser Reihenfolge:

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

Und der "ui-bootstrap" überschrieb die Vorlagen

1
Leonardo Uzon Nowaczyk 14 Aug. 2014 im 23:02

Mlim1972 Antworten funktionieren gut, aber ich habe Angular $ Provide Decorator verwendet, um das zu tun (in Coffeescript):

module.config( ["$provide", ($provide) ->
  $provide.decorator 'accordionDirective', ["$delegate", ($delegate) ->
  $delegate[0].templateUrl = "path/to/modified/accordion-group.html"
  $delegate
]
0
pajooh 12 Dez. 2013 im 14:37