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

Question

我正在使用AngularJS应用程序。

在我的index.html，以我的身体标记结束时，我声明这一点：

<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

而且在我的HTML 'ui.bootstrap'，我尝试使用UIB-手风琴

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

这是工作的罚款，我可以打开/关闭它等等

在p问题是我有错误登录： https://docs.angularjs.org/error/$compile/ctreq?p0=uibAccordion&p1=uibAccordionGroup

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

顺便说一句，因为我在本页使用了多次uib accordion，所以这个错误被记录多次。 （我有不同的<div uib-accordion-group ></div>标签）

Answer 1

其实错误给你一个提示

控制器“uibAccordion”，由指令“uibAccordionGroup”要求，不能被发现！

暗示与词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">

不都！