SayusiAndo SayusiAndo - 4 months ago 293
Javascript Question

angular-ui-bootstrap upgrade 1.3.3 to 2.0.0 missing uibAccordionGroup controller

Today I upgraded angular-ui-bootstrap package from 1.3 to 2.0 and the it throws me the error below.


Error: [$compile:ctreq] Controller 'uibAccordionGroup', required by
directive 'uibAccordionHeading', can't be found!
http://errors.angularjs.org/1.5.7/$compile/ctreq?p0=uibAccordionGroup&p1=uibAccordionHeading


This the affected part of the code:

<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>


What I did so far to solve this issue:


  • I checked whether the correct files are included -> fine

  • I checked the new source code whether the name of the directive has changed - it did not, it should work

  • I searched for uibAccordionGroup controller, I haven't found it...

  • I moved back the heading into uib-accordion-group tag - the error disappeared, but there is no style applied, just the heading text is displayed

  • I deleted the uib-accordion-heading, the result is the same as above, the content of the accordion is displayed but there is no style applied



Have anybody met this issue previously?

Libraries:


  • angular 1.5.7

  • angular-ui 2.0.0



Thanks,

Answer

You're getting this error because the syntax of angular ui bootstrap has changed slightly from version 1.3 to version 2.0.

Here's an excerpt from the accordion example on the website:

<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>

Notice that accordion-group is now an attribute, and not an element.

This should solve your problem.