Hoekige UI.Bootstrap trekklavier en bootstrap3

Question

Ek is deeglik bewus daarvan ui.bootstrap is nog nie volledig op Bootstrap 3 geplaas nie, maar ek het die meeste van my app gebou met behulp daarvan, en ek kan nie net na 2.3 teruggaan net vir hierdie komponent nie.

Dit gesê, ek evalueer my moontlikhede.

Wat ek tot dusver probeer het:

1. Keer terug na bootstrap 2.3
   Het al my stylwerk gebreek ... geen manier nie

2. Hou by BS3 en gryp die trekklavier uit https://github.com/angular-ui/bootstrap/tree/bootstrap3
   Ek het óf probeer om die kode onder die UI.Bootstrap_0.7 Lib in te sluit, die trekklavierkode in UI.Bootstrap 0.7 -kode vervang en dit verwyder en dit heeltemal in 'n ander lêer geplaas. Niks hiervan het gewerk nie

3. Hou by BS3 en probeer die trekklavierstyle van BS2.3 steel
   Op hierdie manier het ek daarin geslaag om 'n styl daaraan toe te voeg, maar die trekklaviergedrag werk eenvoudig nie

In elke poging word geen fout op die konsole getoon nie ...

Ek dwaal in die donker, met geen idee hoe om die trekklavier in my kode in te sluit sonder om dit weer te implementeer nie.
Enige hulp sal baie waardeer word, dankie!

Answer 1

Bootstrap 3 gebruik panele in plaas van die trekklavierklas. Die sjabloon moet daarvoor verander. Om nie die UI-Bootstrap te verander nie, het ek die module wat die sjabloon vir die trekklavier het, oorgeskryf. Hierdie module moet by u JS-klas gevoeg word (en moet na UI-Bootstrap laai):

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

Vind hierdie monster in plunk

Answer 2

jy moet Verwys slegs die "Ui-Bootstrap-Tpls.js" -lêer

Dit was ten minste my geval, ek het albei in hierdie volgorde verwys:

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

en die "Ui-Bootstrap" het die sjablone oorheers

Answer 3

MLIM1972 Antwoorde werk goed, maar ek het Angular $ gebruik om versierder te doen (in CoffeeScript):

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