缺少 Angular ui 引导指令模板

Question

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

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

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

templateURL 用于指令的目的是什么？

当我下载整个 angular 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

我的问题是我仍然在 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">

繁荣，工作。

Answer 2

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

还阅读了他们的 repo 问题和 cmets，该项目的整个执行方式似乎与一个简单易用的工具不一致。虽然我确信它一开始是出于好意，但也许这是一个尽可能避免使用的模块。

当然需要注意的是，这是一种观点，也许我们会发现其他人是否有同样的感觉。

Answer 3

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

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

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

Answer 4

在这个问题上浪费了 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 小时，快乐 :-)。

Answer 5

你有两个选择：

1234563 @

1. 如果您确实想制作一些自己的模板，请在您的应用程序中创建一个 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 6

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

Answer 7

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

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

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