Angular -ui-bootstrap обновление 1.3.3 до 2.0.0 отсутствует контроллер uibAccordionGroup

Сегодня я обновил пакет angular -ui-bootstrap от 1.3 до 2.0, и он меня выбрал ниже.

Ошибка: [$ compile: ctreq] Контроллер 'uibAccordionGroup', требуемый директива "uibAccordionHeading" не может быть найдена! http://errors.angularjs.org/1.5.7/ $compile/ctreq? p0 = uibAccordionGroup & p1 = uibAccordionHeading

Это затронутая часть кода:

<div>
    <uib-accordion>
        <uib-accordion-group is-open="true">
            <uib-accordion-heading>
                {{vm.moduleMenu.name}}<i class="pull-right glyphicon"></i>
            </uib-accordion-heading>

            <div>... other content...</div>
        </uib-accordion-group>
    </uib-accordion>
</div>

Что я сделал до сих пор, чтобы решить эту проблему:

  • Я проверил, включены ли правильные файлы → fine
  • Я проверил новый исходный код, изменилось ли название директивы - он этого не сделал, он должен работать
  • Я искал контроллер uibAccordionGroup, я его не нашел...
  • Я переместил заголовок в тег uib-accordion-group - ошибка исчезла, но стиль не применяется, отображается только текст заголовка
  • Я удалил заголовок uib-accordion, результат такой же, как и выше, содержимое аккордеона отображается, но не применяется стиль

Кто-нибудь раньше встречал эту проблему?

Libraries:

  • angular 1.5.7
  • angular -ui 2.0.0

Спасибо,

Ответы

Ответ 1

Вы получаете эту ошибку, потому что синтаксис angular ui bootstrap немного изменился с версии 1.3 до версии 2.0.

Вот выдержка из примера аккордеона на веб-сайте:

<uib-accordion close-others="oneAtATime">
<div uib-accordion-group class="panel-default" heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
  This content is straight in the template.
</div>
<div uib-accordion-group class="panel-default" heading="{{group.title}}" ng-repeat="group in groups">
  {{group.content}}
</div>
<div uib-accordion-group class="panel-default" heading="Dynamic Body Content">
  <p>The body of the uib-accordion group grows to fit the contents</p>
  <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
  <div ng-repeat="item in items">{{item}}</div>
</div>
<div uib-accordion-group class="panel-default" heading="Custom template" template-url="group-template.html">
  Hello
</div>
<div uib-accordion-group class="panel-default" is-open="status.isCustomHeaderOpen" template-url="group-template.html">
  <uib-accordion-heading>
    Custom template with custom header template <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isCustomHeaderOpen, 'glyphicon-chevron-right': !status.isCustomHeaderOpen}"></i>
  </uib-accordion-heading>
  World
</div>
<div uib-accordion-group class="panel-danger" heading="Delete account">
  <p>Please, to delete your account, click the button below</p>
  <button class="btn btn-danger">Delete</button>
</div>
<div uib-accordion-group class="panel-default" is-open="status.open">
  <uib-accordion-heading>
    I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
  </uib-accordion-heading>
  This is just some content to illustrate fancy headings.
</div>

Обратите внимание, что теперь аккордеонная группа является атрибутом , а не элементом.

Это должно решить вашу проблему.

Ответ 2

В версии 2.0.0 uib-accordion-group теперь является атрибутом, а не элементом. Вы можете увидеть это в repo здесь. Изменение этого параметра на <div uib-accordion-group></div> должно помочь устранить эту ошибку.

Ответ 3

Начиная с 2.0.0 использование директивы uibAccordion и uibAccordionGroup ограничивается только A (атрибутом). См. код здесь. Они должны использоваться как uib-accordion, uib-accordion-group как директива атрибута и т.д.

Я бы сказал, всякий раз, когда вы хотите обновить любую из библиотек до последней версии, обратитесь к их журналам изменений на их github-репо. По этой причине вам не нужно будет спрашивать, что происходит с вашим текущим обновленным.