Question

我对角度很新，我试图添加手风琴，但我一直从控制台得到这个错误。 指令'accordionGroup'所要求的“控制器'手风琴'无法找到！”我下载了角度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>

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

Answer 1

我没有密切关注CSS＆amp; JS引用，但对于HTML，您似乎忘记了根<accordion>标记。直接来自UI-Bootstrap文档，您需要一个像：

这样的结构

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

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

如果这有帮助，请接受答案！

Answer 2

我加载了这个版本0.12的ui.bootstrap因为动画在版本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>

我确保也在头部添加文件。它运作得很好。 <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手风琴指令

2 个答案: