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:
Have anybody met this issue previously?
Libraries:
Thanks,
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With