Angular UI.bootstrap accordéon et bootstrap3

Question

Je suis bien conscient que ui.bootstrap n'est pas encore entièrement porté sur Bootstrap 3, mais j'ai construit la majeure partie de mon application en l'utilisant, et je ne peux pas simplement revenir à 2.3 uniquement pour ce composant.

Cela dit, j'évalue mes possibilités.

Ce que j'ai essayé jusqu'à présent:

1. Revertissez en bootstrap 2.3
   Cassé tous mes styles ...

2. Tenez-vous à BS3 et saisissez l'accordéon de https://github.com/angular-ui/bootstrap/tree/bootstrap3
   J'ai soit essayé d'inclure le code sous la lib ui.bootstrap_0.7, a remplacé le code d'accordéon dans ui.bootstrap 0.7 du code et l'a supprimé et l'a placé entièrement dans un autre fichier. Rien de tout cela n'a fonctionné

3. Restez à BS3 et essayez de voler les styles d'accordéon de BS2.3
   De cette façon, j'ai réussi à y ajouter un style, mais le comportement de l'accordéon ne fonctionnait tout simplement pas

Dans chaque essai, aucune erreur n'est affichée sur la console ...

Je me promène dans l'obscurité, sans aucune idée de la façon d'inclure l'accordéon dans mon code sans le réimplémenter à nouveau.
Toute aide sera très appréciée, merci!

Answer 1

Bootstrap 3 utilise des panneaux au lieu de la classe d'accordéon. Le modèle doit changer pour cela. Pour ne pas changer UI-Bootstrap, j'ai écrasé le module qui a le modèle pour l'accordéon. Ce module doit être ajouté à votre classe JS (et doit se charger après 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>");
}]);

Trouvez cet échantillon dans se cacher

Answer 2

vous devez référence uniquement le fichier "ui-bootstrap-tpls.js"

C'était mon cas au moins, je faisais référence à tous les deux dans cet ordre:

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

Et le "UI-Bootstrap" l'emportait sur les modèles

Answer 3

Mlim1972 Les réponses fonctionnent bien, mais j'ai utilisé Angular $ Fournir un décorateur pour le faire (dans CoffeeScript):

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