angular-ui-bootstrap 升级 1.3.3 到 2.0.0 缺少 uibAccordionGroup 控制器答案

【问题标题】：angular-ui-bootstrap upgrade 1.3.3 to 2.0.0 missing uibAccordionGroup controllerangular-ui-bootstrap 升级 1.3.3 到 2.0.0 缺少 uibAccordionGroup 控制器
【发布时间】：2016-07-20 19:50:53
【问题描述】：

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

错误：[$compile:ctreq] 控制器“uibAccordionGroup”，需要指令“uibAccordionHeading”，找不到！ 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 控制器，没有找到...
我将标题移回 uib-accordion-group 标记 - 错误消失了，但没有应用样式，只显示标题文本
我删除了uib-accordion-heading，结果和上面一样，显示了accordion的内容但是没有应用样式

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

图书馆：

角1.5.7
angular-ui 2.0.0

谢谢，

【问题讨论】：

为什么它被否决了？
我的猜测是有人认为这个问题没有显示研究，因为代码仓库和变更日志之类的东西很容易解释这个问题。毕竟，在升级主要版本（有时甚至是次要版本）时挖掘更新日志是最佳做法。
感谢您的回答！发行说明和变更日志在我的检查清单上。

标签： javascript angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

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

这是网站上手风琴示例的摘录：

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

注意手风琴组现在是一个属性，而不是一个元素。

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

【讨论】：

谢谢，我可以看一整晚才能弄清楚。

【解决方案2】：

在 v2.0.0 中，uib-accordion-group 现在是属性而不是元素。您可以在repo here 中看到这一点。将其更改为 <div uib-accordion-group></div> 应该有助于解决错误。

【讨论】：

【解决方案3】：

自 2.0.0 起，uibAccordion 和 uibAccordionGroup 指令的使用仅限于 A（属性）。见code here。它们应该被用作uib-accordion、uib-accordion-group 作为属性指令等等。

我想说，每当您想将任何库升级到其最新版本时，请参阅他们的 github 存储库上的 change logs。这样您就无需询问您当前的更新出了什么问题。

【讨论】：