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

In my case I was using UI-router to redirect to a $state from the controller I defined in the config.router.js of my app. I guess this was triggering before the controller had a chance to acknowledge the directive.

I just wrapped that redirect in a $timeout:

$timeout(function () {
    $state.go( 'state.name', { params } );
}, 0);

Answer 3

Ran into a similar issue using an up-to-date ui-bootstrap (as of 2/29/16). In my markup, I did have both the uib-accordion and uib-accordion-group directives as required. I initialized isOpen, isDisabled just to see if that was the problem and still saw the issue.

It only manifested itself on mobile Safari for me BTW. The error message was VERRRRY similar and only appeared the very first time the app loaded on that device. It didn't actually hinder the app in any way, just annoying.

Adding the technically optional, but preferred "data-" before all angular directives seemed to fix the issue.

Answer 4

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