Угловой аккордеон ui.bootstrap и bootstrap3

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

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

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

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

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

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

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

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


javascript angularjs angular-ui-bootstrap angular-ui
person domokun    schedule 03.12.2013    source источник
comment
Почему бы не получить кастомную сборку ветки bootstrap3, пока она не будет официально поддержана и выпущена? Все компоненты (кроме прогресса) работают в указанной ветке.   -  person pkozlowski.opensource    schedule 03.12.2013
comment
@pkozlowski.opensource На самом деле, это то, что я пробовал в пункте 2, но безуспешно. Если и есть способ создать кастомную сборку для ветки bs3, то я его не заметил. Я полагаю, я мог бы создать пользовательскую сборку bs2, а затем перезаписать все части, связанные с аккордеоном, на одну из ветки bs3... Это то, что вы предлагаете?   -  person domokun    schedule 04.12.2013
comment
вы можете создать собственную сборку из Grunt, как описано здесь: github.com/angular-ui/bootstrap# построить. Или просто удалите ненужные директивы из сборки по умолчанию.   -  person pkozlowski.opensource    schedule 04.12.2013
comment
@pkozlowski.opensource Отлично, у меня все работает. Поскольку моя основная машина - KO, я не смог использовать Grunt на машине с Windows (вздох), на которой я работаю в банкомате. Я создал Frankestein, переопределив модули collapse, transition и accordion, и он заработал, спасибо!   -  person domokun    schedule 04.12.2013

Ответы (3)


arrow_upward
2
arrow_downward

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

Найдите этот пример в разрыве.

person mlim1972    schedule 12.12.2013
comment
Да, я решал примерно так же. Только я тоже перезаписал логику... хотя не уверен, что это было нужно. - person domokun; 12.12.2013

arrow_upward
1
arrow_downward

вам нужно ссылаться только на файл "ui-bootstrap-tpls.js"

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

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

и «ui-bootstrap» переопределял шаблоны

person Leo    schedule 14.08.2014

arrow_upward
0
arrow_downward

Ответы mlim1972 работают хорошо, однако для этого я использовал декоратор angular $provide (в coffeescript):

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