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

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 控制器，没找到...
我将标题移回 uib-accordion-group 标记 - 错误消失了，但没有应用任何样式，仅显示标题文本
我删除了uib-accordion-heading，结果和上面一样，显示了手风琴的内容，但没有应用样式

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

图书馆：

angular 1.5.7
angular-ui 2.0.0

谢谢，

Answer 1

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

Answer 2

您收到此错误是因为 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>

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

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

Answer 3

从 2.0.0 开始，uibAccordion & uibAccordionGroup 指令的使用仅限于 A（属性）。参见 code here。它们应该用作 uib-accordion、uib-accordion-group 作为属性指令等。

我想说的是，每当您想将任何库升级到最新版本时，请参考他们 github 存储库中的 change logs。这样你就不用再问你当前更新有什么问题了。

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

angular-ui-bootstrap upgrade 1.3.3 to 2.0.0 missing uibAccordionGroup controller

javascript

twitter-bootstrap

angularjs

angular-ui-bootstrap