AngularJS UiBoostrap 手风琴。无法找到指令“uibAccordionGroup”所需的控制器“uibAccordion”

Question

我正在开发一个 AngularJS 应用程序。

在我的 index.html 中，在 body 标签的末尾，我声明：

<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js"></script>
<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

我在 angular.module 中包含了 'ui.bootstrap'

在我的 html 中，我尝试使用 uib-accordion

<div id="Help" uib-accordion-group is-open="main.openHelp">
    <uib-accordion-heading>
        <span >
            Help
        </span>            
        <span>
            <i class="pull-right fa" ng-click="main.openHelp = !main.openHelp" ng-class="{'fa-chevron-down': main.openHelp, 'fa-chevron-left': !main.openHelp}"></i>                    
        </span>
    </uib-accordion-heading>
    <div class="row">
        <div>
             Useless Content
        </div>
    </div>
</div>

这工作正常，我可以打开/关闭它等等......

问题是我记录了一个错误：https : //docs.angularjs.org/error/$compile/ctreq?p0=uibAccordion&p1=uibAccordionGroup

我不明白我应该怎么做才能解决这个问题。

顺便说一句，由于我在此页面中多次使用 uib 手风琴，因此多次记录此错误。（我有不同的 <div uib-accordion-group ></div>标签）

Answer 1

其实这个错误给了你一个提示

无法找到指令“uibAccordionGroup”所需的控制器“uibAccordion”！

提示是用这个词required。在 AngularJS 中，指令可以定义要包含在其他指令中的要求，如果这些未来指令不存在，那么您将收到错误消息。

在您的情况下，该指令uibAccordionGroup需要嵌套在uibAccordion您未在 HTML 中定义的 .

这就是它的样子

<uib-accordion close-others="oneAtATime"> <!-- pay attention to this line -->
    <div id="Help" uib-accordion-group is-open="main.openHelp">
        <uib-accordion-heading>
        <span >
            Help
        </span>            
        <span>
        <i class="pull-right fa" ng-click="main.openHelp = !main.openHelp" ng-class="{'fa-chevron-down': main.openHelp, 'fa-chevron-left': !main.openHelp}"></i>                    
        </span>
    </uib-accordion-heading>
        <div class="row">
            <div>
                 Useless Content
            </div>
        </div>
    </div>
</uib-accordion>

另外@Nair Athul 是对的，你应该包括

<script src="bower_components/angular-bootstrap/ui-bootstrap.min.js">

或者

<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js">

不是都！