AngularJS UiBoostrap手风琴。无法找到指令&ubeAccordionGroup'所要求的控制器&uibAccordion'

时间:2017-05-05 09:01:01

标签: angularjs angular-ui-bootstrap accordion

我正在使用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>

我包括&#39; ui.bootstrap&#39;在我的angular.module

在我的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>标签)

1 个答案:

答案 0 :(得分:4)

实际上错误会给你一个提示

  

无法找到指令'uibAccordionGroup'所需的控制器'uibAccordion'!

提示是单词required。在AngularJS中,directives can define a requirement to be included inside other directives,如果这些to-be-father指令不存在,那么你将得到一个错误,就像你得到的一样。

在您的情况下,指令uibAccordionGroup需要嵌套在您未在HTML中定义的uibAccordion内。

它应该是这样的样子

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

不是两个!