Angularjs 缺少角度ui引导指令模板

我目前正在我的机器上本地测试angular

bootstrap UI

。当我尝试重新创建手风琴和对话框的示例时。我在控制台中收到此错误消息，表示模板丢失

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

当我查看

ui-bootstrap-0.1.0.js

时，指令有一个模板

URL

指令的

模板URL

的用途是什么

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

您有两种选择：

如果您不想制作自己的模板，而想要内置模板，您应该下载

ui-bootstrap-tpls-0.1.0.js

文件-这将注入所有模板，以便将它们预缓存到您的应用程序中：

如果您确实想制作一些自己的模板，请在应用程序中创建一个

templates

文件夹，然后从angular ui/bootstrap项目下载模板。然后覆盖您自己想要自定义的内容

请在此处阅读更多信息：

编辑：

您还可以下载bootstrap-tpls.js，并使用AngularJS decorator更改指令的templateUrl，用自己的模板URL覆盖指令的一些模板URL。以下是更改的datepicker的templateUrl的示例：

---

此错误消息似乎也出现在另一个场景中，如下所示：

如果您将模块依赖项声明为“ui.bootstrap.dialog”而不是“ui.bootstrap”，angular将抛出一个模板未找到错误

以下是官方对“为什么”的解释：

---

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

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

去。单击“创建自定义生成”并选择您使用的功能。（1项无需拉动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小时，快乐起来：-）

---

这个问题的可能原因是被接受的答案，但这个问题的另一个可能原因是我遇到的问题，我想发表文章，以防其他人遇到与这个问题相同的次要原因

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

---

有一次，我确保只包含“ui bootstrap tpls.min.js”，所有这些都按预期工作。

我不得不说，我阅读了评论，并添加了昨晚10个小时的经验。避免UI引导—这似乎比它的价值大得多

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

---

当然，这是一种意见，也许我们会发现其他人是否也有同样的感受

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

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

在my index.html中（注意“-tpls”）：

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

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

---

动臂，起作用。

谢谢你的提示。我想我需要的只是ui-bootstrap-0.1.0.js，我不知道我还需要ui-bootstrap-tpls-0.1.0.js。只有当引导ui注意到两个js文件也是需要的时候，你不需要两个，你可以选择其中一个。一个有所有的javascript+模板，一个只有javascript。你是对的，我们确实需要在主自述中告诉你这一点，而不仅仅是gh页面自述。我还发现，当你启动你的应用程序时，你需要列出tpls依赖项：angular.module（'YourApp'，['ui.bootstrap.tpls'）@Andy Joslin有没有一种方法可以覆盖引导查找模板的位置？例如，如果我有一个views或partials文件夹，我是否可以映射到这些位置中的任何一个？我不知道我必须在指令名m中添加'Directive'（…这很有帮助：ui.boostrap.tpls部分是一个巨大的进步。我已经浪费了大约3个小时试图让它工作。天哪…我已经花了3-4个小时试图弄清楚为什么该死的模板不会加载…谢谢。很高兴它有帮助，布雷迪。我强迫自己如果我有问题超过15分钟，-在堆栈上问。这不是很容易做到的成功。祝你好运，毫不犹豫地问：-）天哪，我花了这么多时间在这上面…从我的灵魂和心灵深处，谢谢你！在应用程序中注入'ui.bootstrap.tpls'是关键。我只注入了'ui.bootstrap'，所以当我做到这两件事时，它都起了作用。真是太感谢你了。哇……我简直不敢相信我只花了两个小时试图打开一个模态…都是因为几个字符。谢谢！那“XXXXXXX-tp

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

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

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

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