Question

我正在尝试使用Angular UI Bootstrap库（特别是modal），但是我无法按正确的顺序加载每个库的正确版本，但我不断遇到{{1错误。我已经切换回Bootstrap 2.3，但它仍然存在。我的应用程序标题在下面，任何人都可以发现任何错误的版本或JS文件乱序？我也使用Angular UI Sortable，因此包含它。

No module: template/accordion/accordion-group.html

我的app声明如下：

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

    <script src="http://code.angularjs.org/1.0.2/angular.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>

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

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">

    <link rel="stylesheet" href="style.css" />
</head>

修改

我设法让它像这样工作：

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

和

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>

    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.11.2/ui-bootstrap-tpls.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-sortable/0.13.2/sortable.min.js"></script>

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.css">

    <link rel="stylesheet" href="style.css" />
</head>

Answer 1

你是否下载了所有文件？根据他们的文档

要下载的文件

所有指令的构建文件以多种形式分发：   缩小生产用量，不缩小开发，用或   没有模板。描述了所有选项，可以下载   从这里。应该注意的是-tpls文件包含   JavaScript中捆绑的模板，而普通版则没有   包含捆绑的模板。有关更多信息，请查看常见问题解答   这里和自述文件。

或者，如果您只对指令的子集感兴趣，   你可以创建自己的构建。

无论你选择哪种方法，总体规模都是一个好消息   下载非常小：所有指令都<76kB（gzip约为20kB）   压缩！）

看起来您的错误是模板无法启动或加载。也许你错过了打包模板的下载。在您的情况下，没有加载手风琴模板。

阅读常见问题解答之后，我也想知道是否同时使用angular-ui cdns会导致您的问题。 angular-ui首先加载没有模板，然后加载angular-ui-bootstrap和模板。

Angular-ui-bootstrap FAQ

此项目附带了几个可交付成果： https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files如果你选择的那些文件的作用并不清楚 ui-bootstrap-tpls- [version] .min.js，但一定要只包含一个文件在您的项目中。

你正在展示这个

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.4/ui-bootstrap-tpls.min.js"></script>

尝试加载

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

有关github

的构建的更多信息

我正在阅读的摘录是

现在应该清楚的是，名称中带有-tpls的文件具有与指令捆绑在一起的特定于引导程序的模板。适合那些人想要采取所有指令，不需要定制任何东西解决方案是获取一个名为的文件 UI-自举-tpls- [版] .min.js。如果，另一方面默认模板不是你需要的 ui-bootstrap- [版本] .min.js并提供您自己的模板默认的（https://github.com/angular-ui/bootstrap/tree/master/template）作为起点。

Answer 2

你有没有添加＆u ;.router＆＃39;和＆＃39; ui.sortable＆＃39;作为app.js文件中的依赖项？

 var myApp = angular.module('myApp', ['ui.router','ui.sortable']);

Answer 3

我会使用包管理器（例如Bower或WebPack）来管理客户端依赖项。

根据Angular UI docs您只需添加： AngularJS和Bootstrap CSS。不需要jQuery。

然后您应该使用ui.bootstrap依赖项初始化Angular App模块：

angular.module('myModule', ['ui.bootstrap']);

==更新

根据这个example，这应该是你需要的一切：

的index.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
<script src="https://rawgithub.com/angular-ui/ui-sortable/master/src/sortable.js"></script>

```

app.js

var myapp = angular.module('sortableApp', ['ui.sortable']);

如果这有助于你，请告诉我

如何加载Angular UI Bootstrap和依赖项

3 个答案: