javascript - angular-ui-bootstrap 升级 1.3.3 到 2.0.0 缺少 uibAccordionGroup Controller

Question

今天我将 angular-ui-bootstrap 包从 1.3 升级到 2.0，它抛出以下错误。

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

这是受影响的代码部分:

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

到目前为止我为解决这个问题做了什么:

• 我检查了是否包含了正确的文件 -> 没问题
• 我检查了新的源代码是否指令的名称已经改变——没有，它应该可以工作
• 我搜索了 uibAccordionGroup Controller ，但没找到...
• 我将标题移回 uib-accordion-group 标签 - 错误消失了，但没有应用任何样式，仅显示标题文本
• 我删除了uib-accordion-heading，结果和上面一样，显示了 Accordion 的内容，但是没有应用样式

以前有人遇到过这个问题吗？

图书馆:

• Angular 1.5.7
• Angular 用户界面 2.0.0

谢谢，

Answer 1

您收到此错误是因为 angular ui bootstrap 的语法从 1.3 版到 2.0 版略有变化。

以下是网站上 Accordion 示例的摘录:

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

请注意 accordion-group 现在是一个属性，而不是一个元素。

这应该可以解决您的问题。