Angular UI 手风琴指令未找到

Question

我是 angular 的新手，我试图添加手风琴，但我不断从控制台收到此错误。 "Controller 'accordion', required by directive 'accordionGroup', can't be found!" 我下载了 angular ui 的自定义 build 版本。我像这样将 'ui.bootstrap' 注入到模块中。

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

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

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

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

Answer 1

我没有仔细查看 CSS 和 JS 参考资料，但是对于 HTML，您似乎忘记了根 <accordion> 标签。直接来自 UI-Bootstrap 文档，您需要这样的结构：

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

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

如果对您有帮助，请采纳！

Answer 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 文件，然后我根据自己的喜好对其进行了编辑，它终于成功了。我欣喜若狂。

<手风琴close-others="oneAtATime"><br> <accordion-group is-open="status.open" is-disabled="status.isFirstDisabled"> <accordion-heading> 标题在这里 </accordion-heading> 数据在这里 </手风琴>

我也确保将文件添加到 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>

Angular UI 手风琴指令未找到

Angular UI accordion directive not found

javascript

accordion

angularjs

angularjs-directive

angular-ui-bootstrap