个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-03 14:55:57 27 4
gpt4 key购买 nike

我正在尝试 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/

27 4 0
文章推荐： unit-testing - Clojure 测试覆盖率工具？
文章推荐： netty - 在 netty channel 上设置套接字超时
文章推荐： swing - 非阻塞模态 Swing 进度对话框
文章推荐： visual-studio - 如何创建 Entity Framework 项目？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com