Question

我目前正在我的机器上本地测试角度bootstrap-UI。当我尝试重新创建手风琴和对话框的例子时。我在控制台中收到此错误消息，指出该模板已丢失。

错误示例：找不到404 - localhost / angular / template / message.html

当我查看ui-bootstrap-0.1.0.js时，该指令有一个模板URL。

指令templateURL的目的是什么？

当我下载整个角度bootstrap-UI zip文件时，是否包含这些模板？

我是否遗漏了我应该包含在标题中的其他文件？

<link rel="stylesheet" href="includes/css/bootstrap.css">
<script src="includes/js/angular.js"></script>
<script src="includes/js/ui-bootstrap-0.1.0.js"></script>

Answer 1

您有两种选择：

如果您不想制作自己的模板并想要内置模板，则应下载ui-bootstrap-tpls-0.1.0.js文件 - 这会注入所有模板，以便将它们预先缓存到您的应用中： https://github.com/angular-ui/bootstrap/blob/gh-pages/ui-bootstrap-tpls-0.1.0.js#L1322
如果您想制作一些自己的模板，请在应用中创建一个templates文件夹，然后从angular-ui / bootstrap项目下载模板。然后覆盖您想要自己定制的那些。

在此处阅读更多内容：https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files

修改：

您还可以下载bootstrap-tpls.js并使用您自己的指令覆盖某些指令的templateUrls，使用AngularJS装饰器来更改指令的templateUrl。这是一个改变datepicker的templateUrl：
的例子
http://docs.angularjs.org/api/AUTO.$provide#methods_decorator

myApp.config(function($provide) { $provide.decorator('datepickerDirective', function($delegate) { //we now get an array of all the datepickerDirectives, //and use the first one $delegate[0].templateUrl = 'my/template/url.html'; return $delegate; }); });

Answer 2

在这个问题浪费了2个小时之后我的5美分。你应该：

转到http://angular-ui.github.io/bootstrap/。单击“创建自定义构建”并选择您使用的功能。（没有必要为一件物品拉60k）。
在我的案例中包括custom.tpls.js ui-bootstrap-custom-0.10.0.min.js
在您的Angular模块中，'ui.bootstrap.yourfeature'包括'ui.bootstrap.modal'
还包括 'ui.bootstrap.tpls'。所以我的模块完全依赖性看起来像这样：

var profile = angular.module("profile",[ 'ui.bootstrap.modal', 'ui.bootstrap.tpls' ]);
节省2个小时，快乐:-)。

Answer 3

此错误消息似乎也出现在另一个场景中，如下所示： http://plnkr.co/edit/aix6PZ?p=preview

如果你声明你的模块依赖只是'ui.bootstrap.dialog'而不是'ui.bootstrap'，那么angular会咳出一个找不到模板的错误。

以下是“为什么”的官方解释： https://github.com/angular-ui/bootstrap/issues/266

Answer 4

虽然在我的index.html中定义了所有必需的脚本，但我遇到了同样的错误。最后，我通过将 ui-bootstrap.js 脚本设置为首先加载 ui-bootstrap-tpls.js 来改变加载顺序。这解决了问题。但是，后来我注意到（如上所述）只需要一个lib。所以我删除了 ui-bootstrap.js 。

Answer 5

我的问题是我仍然在HTML中包含template-url，如下所示：

<div uib-accordion-group class="panel-default" heading="Custom template" template-url="group-template.html">

这导致我的浏览器挂起 - 这很奇怪但是就是这样。

总之，我做了什么：

bower install bootstrap --save
bower install angular-bootstrap --save

在我的index.html中（注意＆＃34; -tpls＆＃34;）：

<script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>

然后在我的Angular应用程序中：

angular
  .module('myApp', ['ui.bootstrap'])

然后只需删除HTML中的template-url：

<div uib-accordion-group class="panel-default" heading="Custom template">

热潮，工作。

Answer 6

这个问题的可能原因是接受的答案，但是我遇到了这个问题的另一个可能原因，我希望发布以防其他人遇到同样的问题的次要原因。

症状完全相同，404在bootstrap模板上，但在我的情况下，我实际上包括'ui-bootstrap-tpls.min.js'javascript文件。问题是我还包括非模板版本'ui-bootstrap.min.js'。一旦两者都被包括在内，我怀疑秩序很重要，一个人会取代另一个。就我而言，非模板版本取代了模板化版本，导致404问题。

一旦我确定只包含'ui-bootstrap-tpls.min.js'，就会按预期工作。

Answer 7

我必须说阅读评论并在昨晚10小时内添加我的经验。避免UI Bootstrap似乎比它的价值更多的努力。

同时阅读了他们的回购问题和评论，项目进行的整个方式似乎与简单易用的工具不一致。虽然我确信它是以最好的意图开始的，但也许这是一个可以避免的模块。

当然有一个警告，这是一个意见，也许我们会发现其他人是否有同感。

Angular ui bootstrap指令模板缺失

7 个答案: