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'를 포함 이것은 잘 작동

<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 - 아코디언을 사용하려고, 나는 .../닫기 그것이 등

또한, p를 열 수 있습니다 오류가 기록 된 것입니다 : https://docs.angularjs.org/error/$compile/ctreq?p0=uibAccordion&p1=uibAccordionGroup

나는 이것을 해결하기 위해 무엇을해야하는지 이해하지 못합니다.

그런데이 페이지에서 여러 번 uib accordion을 사용하기 때문에이 오류는 여러 번 기록됩니다. (나는 다른 <div uib-accordion-group ></div> 태그가)

Answer 1

가 실제로 오류가 당신에게 힌트를 제공 지침 'uibAccordionGroup'에 필요한

컨트롤러 'uibAccordion는'찾을 수 없습니다!

힌트의 의미는 required입니다. AngularJS, directives can define a requirement to be included inside other directives에서 이러한 아버지의 지시어가 없으면 오류가 발생합니다.

귀하의 경우, uibAccordionGroup 지시어는 HTML 내부에서 정의하지 않은 uibAccordion 안에 중첩되어야합니다.

이

, 당신은 하나

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

또는

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

하지

을 포함해야이

<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처럼 보이도록하는데 적합한 방법입니다 양자 모두!