SayusiAndo SayusiAndo - 2 months ago 244
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!$compile/ctreq?p0=uibAccordionGroup&p1=uibAccordionHeading

This the affected part of the code:

<uib-accordion-group is-open="true">
{{}}<i class="pull-right glyphicon"></i>

<div>... other content...</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?


  • angular 1.5.7

  • angular-ui 2.0.0



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 uib-accordion-group class="panel-default" heading="{{group.title}}" ng-repeat="group in groups">
<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 uib-accordion-group class="panel-default" heading="Custom template" template-url="group-template.html">
<div uib-accordion-group class="panel-default" is-open="status.isCustomHeaderOpen" template-url="group-template.html">
    Custom template with custom header template <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isCustomHeaderOpen, 'glyphicon-chevron-right': !status.isCustomHeaderOpen}"></i>
<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 uib-accordion-group class="panel-default" is-open="">
    I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down':, 'glyphicon-chevron-right': !}"></i>
  This is just some content to illustrate fancy headings.

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

This should solve your problem.