compile error, accordion controller required

Question

I met following error in the console when using angular-bootstrap ui. I have angular 1.2.6, bootstrap 3.0, and angular-bootstrap 0.10.0.

Error: [$compile:ctreq] Controller 'accordion', required by directive 'accordionGroup', can't be found!

Anyone know why it happens? My html code.

<div ui-view>
        <accordion-group id="crud-talbe" ng-repeat="grid in grids" heading="{{grid.name}}">
            <a ng-click="createNewEntity(grid.name)" class="btn btn-default">create new {{grid.name}}</a>
            <div class="crudGridStyle" ng-grid="grid" />
        </accordion-group>

Answer 1

From the code you have provided, you aren't including enough of the required code from ui-bootstrap.

This looks like the minimum of what you need and why the compiler is giving the error.

  <accordion close-others="oneAtATime">
    <accordion-group heading="Static Header, initially expanded" is-open="true">
      This content is straight in the template.
    </accordion-group>
  </accordion>

This is straight off the ui-bootstrap site... accordion section.

You can see that in the accordion group directive's code that the accordion is required...

From github:

// The accordion-group directive indicates a block of html that will expand and collapse in an accordion
.directive('accordionGroup', function() {
  return {
    require:'^accordion',         // We need this directive to be inside an accordion
    restrict:'EA',
    transclude:true,              // It transcludes the contents of the directive into the template
    replace: true,                // The element containing the directive will be replaced with the template
    templateUrl:'template/accordion/accordion-group.html',
    scope: {
      heading: '@',               // Interpolate the heading attribute onto this scope
      isOpen: '=?',
      isDisabled: '=?'
    },
    controller: function() {
      this.setHeading = function(element) {
        this.heading = element;
      };
    },
    link: function(scope, element, attrs, accordionCtrl) {
      accordionCtrl.addGroup(scope);

      scope.$watch('isOpen', function(value) {
        if ( value ) {
          accordionCtrl.closeOthers(scope);
        }
      });

      scope.toggleOpen = function() {
        if ( !scope.isDisabled ) {
          scope.isOpen = !scope.isOpen;
        }
      };
    }
  };
})

Answer 2

i found this error when $compile by myself. cause my code html

<accordion close-others="oneAtATime">
    <accordion-group ng-repeat="group in groups" heading="Static Header, initially expanded" is-open="true">
      This content is straight in the template.
    </accordion-group>
  </accordion>

change to

<accordion close-others="oneAtATime" ng-repeat="group in groups">
    <accordion-group heading="Static Header, initially expanded" is-open="true">
      This content is straight in the template.
    </accordion-group>
  </accordion>

i fixed it