未找到 Angular UI 手风琴指令答案

【问题标题】：Angular UI accordion directive not found未找到 Angular UI 手风琴指令
【发布时间】：2015-07-31 18:19:02
【问题描述】：

我对 angular 还很陌生，我试图添加手风琴，但我不断从控制台收到此错误。 “找不到指令'accordionGroup'所需的控制器'accordion'！”我下载了angular ui的自定义构建版本。我像这样将“ui.bootstrap”注入到模块中。

var app = angular.module('MenuApp', ['ngRoute', 'ui.bootstrap']);

在我的 index.html 中，我添加了以下代码以将文件加载到 head 部分。

<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">

在正文中，我是这样加载自定义js文件的。 <script src="https://cdn.jsdelivr.net/g/angularjs@1.3.14(angular.min.js),angular.ui-router@0.2.13(angular-ui-router.min.js)"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular-route.min.js"></script> <script src="js/ui-bootstrap-tpls-0.13.1.js"></script>

在我的 menu.html 中，我正在加载这样的手风琴菜单。 <accordion-group is-open="status.open"> <accordion-heading> I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i> </accordion-heading> This is just some content to illustrate fancy headings. </accordion-group>

所以我的问题是，我该如何解决这个问题？我一直在阅读他们网站上的文档，但不知何故我似乎无法理解如何修复错误。我知道我可能遗漏了一些东西，但我现在还不确定。

【问题讨论】：

compile error, accordion controller required 的可能重复项
看起来解决方案可能与@sheilak 的链接问题中的相同
谢谢，但我看了一下另一个问题，并尝试了他们的解决方案。不幸的是，仍然没有运气。
还是同样的错误吗？添加手风琴指令后，您能否使用 menu.html 代码更新问题？
感谢您的帮助。我确实解决了这个问题。我查看了我的代码并将控制器添加到我的 js 文件中。我会发布答案。

标签： javascript angularjs angularjs-directive accordion angular-ui-bootstrap

【解决方案1】：

我没有仔细查看 CSS 和 JS 引用，但对于 HTML，您似乎忘记了根 <accordion> 标记。直接来自 UI-Bootstrap 文档，您需要如下结构：

  <accordion>
    <accordion-group>
      .......
    </accordion-group>
    <accordion-group>
      .......
    </accordion-group>
  </accordion>

https://angular-ui.github.io/bootstrap/#/accordion

如果有帮助，请采纳！

【讨论】：

很高兴为您提供帮助 - 如果这能解决您的问题，您能“接受”我的回答吗？我正在努力建立我的代表:)

【解决方案2】：

我加载了 ui.bootstrap 的 0.12 版本，因为动画在 0.13 版本中被破坏了。

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.js"></script>

我复制了一个使用嵌套手风琴菜单找到的 plunker 文件，然后我根据自己的喜好对其进行了编辑，它终于奏效了。我欣喜若狂。

<accordion close-others="oneAtATime"> <accordion-group is-open="status.open" is-disabled="status.isFirstDisabled"> <accordion-heading> TITLE HERE </accordion-heading> DATA HERE </accordion>

我也确保将文件添加到 head 部分。它工作得很好。 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.5/angular-route.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.js"></script>

【讨论】：