Twitter Bootstrap Question posted in

Twitter bootstrap – Angular UI accordion directive not found

I’m fairly new to angular and I was trying to add the accordion, but I keep getting this error from the console. “Controller ‘accordion’, required by directive ‘accordionGroup’, can’t be found!” I downloaded the custom build version of the angular ui. I injected the ‘ui.bootstrap’ into the module like this.

var app = angular.module('MenuApp', ['ngRoute', 'ui.bootstrap']);

In my index.html I added the following code to load the files to the head section.

<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

In the body, I loaded the custom js file like this.
<script src="https://cdn.jsdelivr.net/g/[email protected](angular.min.js),[email protected](angular-ui-router.min.js)"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular-route.min.js"></script>
<script src="js/ui-bootstrap-tpls-0.13.1.js"></script>

In my menu.html, I am loading the accordion menu like this.
<accordion-group is-open="status.open">
<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>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>

So my question is, how do I fix this issue? I have been reading the docs on their website and somehow I can’t seem to understand how to fix the error. I know I am probably missing something, but I’m not really sure at this point.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I loaded this version 0.12 of ui.bootstrap because the animation was broken in version 0.13.

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.js"></script>

    I copied a plunker file I found with nested accordion menus and then I edited it to my liking and it finally worked. I was so ecstatic.

    <accordion close-others="oneAtATime">
    <accordion-group is-open="status.open" is-disabled="status.isFirstDisabled"> <accordion-heading> TITLE HERE </accordion-heading> DATA HERE </accordion>

    I made sure to add the files in the head section too. It worked just fine. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular-route.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.js"></script>


  2. 0

    I didn’t look closely at the CSS & JS references, but for the HTML, it seems like you forgot the root <accordion> tag. Directly from the UI-Bootstrap docs, you need a structure like:

      <accordion>
    <accordion-group>
      .......
    </accordion-group>
    <accordion-group>
      .......
    </accordion-group>
  </accordion>

    https://angular-ui.github.io/bootstrap/#/accordion

    If this helps, please accept the answer!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search