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

Question

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 1

Since 2.0.0 the use of uibAccordion & uibAccordionGroup directive got restricted to A(attribute) only. See code here. They should get used as uib-accordion, uib-accordion-group as attribute directive & so on.

I'd say whenever you wanted to upgrade any of the library to its latest version, refer to their change logs on their github repo. By which you will no need to ask what going wrong with your current updated.

Answer 2

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.

Answer 3

In v2.0.0, uib-accordion-group is now an attribute not an element. You can see that in the repo here. Changing it to <div uib-accordion-group></div> should help resolve the error.