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

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

Controller 'uibAccordion', required by directive 'uibAccordionGroup', can't be found!

提示与单词required有关。在 AngularJS、directives can define a requirement to be included inside other directives 中，如果这些准父亲指令不存在，那么您将收到错误消息。

在您的情况下，指令 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">

不是两者！

AngularJS UiBoostrap 手风琴。找不到指令 'uibAccordionGroup' 所需的控制器 'uibAccordion'

AngularJS UiBoostrap Accordion. Controller 'uibAccordion', required by directive 'uibAccordionGroup', can't be found

accordion

angularjs

angular-ui-bootstrap