编译错误，需要手风琴控制器答案

【问题标题】：compile error, accordion controller required编译错误，需要手风琴控制器
【发布时间】：2014-06-05 16:01:27
【问题描述】：

我在使用 angular-bootstrap ui 时在控制台中遇到了以下错误。我有 angular 1.2.6、bootstrap 3.0 和 angular-bootstrap 0.10.0。

错误：[$compile:ctreq] 控制器“accordion”，指令“accordionGroup”需要，找不到！

有人知道为什么会这样吗？我的html代码。

<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>

【问题讨论】：

是否有包装 <accordion> 元素？

标签： javascript angularjs angular-ui-bootstrap

【解决方案1】：

从您提供的代码中，您没有包含足够的来自 ui-bootstrap 的所需代码。

这看起来是您需要的最低要求以及编译器给出错误的原因。

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

这直接来自ui-bootstrap 网站...手风琴部分。

您可以在手风琴组指令的代码中看到手风琴是必需的...

来自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;
        }
      };
    }
  };
})

【讨论】：

感谢回复！！

【解决方案2】：

我自己 $compile 时发现了这个错误。 导致我的代码 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>

改成

<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>

我修好了

【讨论】：

请在您的回答中包含您的评论。会清晰很多。

【解决方案3】：

使用最新的 ui-bootstrap（截至 2016 年 2 月 29 日）遇到了类似的问题。在我的标记中，我确实有必要的 uib-accordion 和 uib-accordion-group 指令。我初始化了 isOpen、isDisabled 只是为了看看这是否是问题所在并且仍然发现了问题。

顺便说一句，它只在移动 Safari 上表现出来。错误消息与 VERRRRY 类似，并且仅在应用程序首次加载到该设备时出现。它实际上并没有以任何方式阻碍应用程序，只是烦人。

在所有角度指令似乎解决问题之前添加技术上可选但首选的“数据-”。

【讨论】：

【解决方案4】：

在我的例子中，我使用 UI-router 从我在应用程序的 config.router.js 中定义的控制器重定向到 $state。我猜这是在控制器有机会确认指令之前触发的。

我刚刚将该重定向包装在 $timeout 中：

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

【讨论】：