angularjs - 如何加载 Angular UI Bootstrap 和依赖项

标签 angularjs twitter-bootstrap angular-ui angular-ui-bootstrap

我正在尝试 Angular UI Bootstrap 库(特别是 modal),但我无法以正确的顺序加载每个库的正确版本,但我一直遇到没有模块:template/accordion/accordion-group.html 错误。我已经切换回 Bootstrap 2.3,但它仍然存在。我的应用程序 header 如下,有人能发现任何错误的版本或乱序的 JS 文件吗?我还使用 Angular UI Sortable,因此包含它。

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

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

最佳答案

你下载了所有文件吗?根据他们的文档

Files to download

Build files for all directives are distributed in several flavours: minified for production usage, un-minified for development, with or without templates. All the options are described and can be downloaded from here. It should be noted that the -tpls files contain the templates bundled in JavaScript, while the regular version does not contain the bundled templates. For more information, check out the FAQ here and the README here.

Alternativelly, if you are only interested in a subset of directives, you can create your own build.

Whichever method you choose the good news that the overall size of a download is very small: <76kB for all directives (~20kB with gzip compression!)

看起来您的错误是由于模板未开始可用或加载。也许您错过了打包模板的下载。在您的情况下,未加载 Accordion 模板。

阅读完常见问题解答后,我还想知道是否同时拥有 Angular-ui CDNS 会导致您的问题。 Angular-UI 首先加载没有模板的内容,然后加载带有模板的 Angular-UI-Bootstrap。

Angular-ui-bootstrap FAQ

This project comes with several deliverables described here: https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files If the roles of those files are not clear for you just pick ui-bootstrap-tpls-[version].min.js, but be sure to include only one file in your project.

您正在展示这个

<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

我正在阅读的摘录是

Now it should be clear that files with the -tpls in their name have bootstrap-specific templates bundled with directives. For people who want to take all the directives and don't need to customize anything the solution is to grab a file named ui-bootstrap-tpls-[version].min.js. If, on the other hand default templates are not what you need you could take ui-bootstrap-[version].min.js and provide your own templates, taking the default ones (https://github.com/angular-ui/bootstrap/tree/master/template) as a starting point.

关于angularjs - 如何加载 Angular UI Bootstrap 和依赖项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32824409/

相关文章:

angularjs - 使用 ng-switch 作为标签中断 css

单击按钮时的 Angularjs 操作

javascript - 来自终端的 npm install 错误

javascript - Bootstrap 模式关闭时滚动停止工作

javascript - Angular ui-select,忽略选择中的空项目

javascript - 如何使 Angular Directive 模板包裹内容(directive 元素的子元素)

html - 在 Bootstrap 面板内的同一行对齐两个图像和标题

html - 将图像放在 Navbar Bootstrap 旁边

javascript - 仍然无法包含 Angular ui utils

angularjs - UI-Router 隐藏父模板