55

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

错误示例：404 Not Found - localhost/angular/template/message.html

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

templateURL指令的目的是什么？

当我下载整个 angular bootstrap-UIzip 文件时，是否应该包含这些模板？

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

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

7 回答 7

112

你有两个选择：

  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

  2. 如果您确实想制作一些自己的模板，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;
  });
});
于 2013-02-19T16:10:59.613 回答
67

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

  1. 转到http://angular-ui.github.io/bootstrap/。单击创建自定义构建并选择您使用的功能。（没有必要为 1 项拉 60k）。
  2. 包括custom.tpls.js在我的情况下ui-bootstrap-custom-0.10.0.min.js
  3. 在我的情况下，在您的 Angular 模块'ui.bootstrap.yourfeature'中，它是'ui.bootstrap.modal'

  4. 并且还包括 'ui.bootstrap.tpls'. 所以我的模块完整依赖如下所示：

    var profile = angular.module("profile",[ 'ui.bootstrap.modal', 'ui.bootstrap.tpls' ]);

  5. 节省 2 小时，快乐:-)。
于 2014-06-13T16:24:00.240 回答
12

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

如果您声明您的模块依赖项仅为“ui.bootstrap.dialog”而不是“ui.bootstrap”，则角度会产生模板未找到错误。

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

于 2013-03-25T17:30:23.543 回答
9

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

于 2013-09-13T16:01:39.723 回答
1

我的问题是我仍然在 HTML 中包含模板 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 中（注意“-tpls”）：

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

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

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

然后只需删除 HTML 中的模板 URL：

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

繁荣，工作。

于 2016-10-15T19:17:53.763 回答
0

此问题的可能原因是已接受的答案，但此问题的另一个可能原因是我遇到的问题，我想发布以防其他人遇到与问题相同的次要原因。

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

一旦我确保只包含“ui-bootstrap-tpls.min.js”，一切都按预期工作。

于 2015-11-02T00:39:18.647 回答
0

我不得不说阅读评论并添加我昨晚 10 小时的经验。避免 UI Bootstrap 似乎比它的价值要付出更多的努力。

同样在阅读了他们的回购问题和评论后，该项目的整个实施方式似乎与一个简单易用的工具不一致。虽然我确信它一开始是出于好意，但如果可能的话，也许这是一个要避免的模块。

当然有一个警告，这是一种观点，也许我们会发现其他人是否有同样的感觉。

于 2015-11-18T09:29:53.697 回答