Angular Ui.bootstrap аккордеон и Bootstrap3

Question

Я хорошо знаю, что ui.bootstrap Еще не полностью переносится на начальной загрузке 3, но я построил большую часть своего приложения, используя его, и я не могу просто вернуться к 2.3 только для этого компонента.

Тем не менее, я оцениваю свои возможности.

Что я пробовал до сих пор:

1. Вернуться к начальной загрузке 2.3
   Сломал все мои стили ... ни за что

2. Придерживайтесь BS3 и возьмите аккордеон из https://github.com/angular-ui/bootstrap/tree/bootstrap3
   Я либо пытался включить код ниже UI.BootStrap_0.7 LIB, заменил код аккордеона в ui.bootstrap 0.7 и удалил его и поместил его в другом файле. Ничего из этого не сработало

3. Придерживайтесь BS3 и попытались украсть стили аккордеона от BS2.3
   Таким образом, мне удалось добавить в него стиль, но поведение аккордеона просто не работало

В каждой попытке на консоли нет ошибки ...

Я блуждаю в темноте, не имея ни малейшего представления о том, как включить аккордеон в свой код, не заново его заново.
Любая помощь будет очень оценена, спасибо!

Answer 1

Bootstrap 3 использует панели вместо класса аккордеона. Шаблон должен измениться для этого. Не изменять UI-Bootstrap, я перезаписал модуль, который имеет шаблон для аккордеона. Этот модуль должен быть добавлен в ваш класс JS (и должен загружать после 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>");
}]);

Найти этот образец в отводить

Answer 2

вы должны Ссылка только на файл "UI-bootstrap-tpls.js"

Это был мой случай, по крайней мере, я ссылался на оба в этом порядке:

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

и «UI-Bootstrap» был переоценил шаблоны

Answer 3

MLIM1972 Ответы работают хорошо, однако я использовал Angular $ предоставить декоратор, чтобы сделать это (в CoffeeScript):

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