有缺陷的angular度ui bootstrap指令模板

我目前在我的机器上本地testing了angular度bootstrap-UI 。 当我尝试重新创build手风琴和对话框的例子。 我得到这个错误信息在我的控制台说模板丢失。

错误示例：404 Not Found – 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

你有两个select：

1. 如果你不想制作你自己的模板，并想要内置的模板，你应该下载ui-bootstrap-tpls-0.1.0.js文件 – 这将注入所有模板，以便它们被预caching到你的应用程序中： https://github.com/angular-ui/bootstrap/blob/gh-pages/ui-bootstrap-tpls-0.1.0.js#L1322

2. 如果您想制作自己的模板，请在您的应用中创buildtemplates文件夹，然后从angular-ui / bootstrap项目下载模板。 然后覆盖你想自己定制的。

在这里阅读更多： https : //github.com/angular-ui/bootstrap/tree/gh-pages#build-files

编辑 ：

您还可以下载bootstrap-tpls.js，并使用AngularJS装饰器更改指令的templateUrl，然后用您自己的代码覆盖某些指令的templateUrls。 以下是一个更改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

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

1. 转到http://angular-ui.github.io/bootstrap/ 。 点击创build一个自定义的版本，并select你使用的function。 （一个项目拉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 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在这之后改变了加载顺序。 这解决了这个问题。 但是，后来我注意到（如上所述），只需要一个库。 所以我删除了ui-bootstrap.js 。

Answer 5

我的问题是，我仍然包括在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中的template-url：

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

繁荣，工作。

Answer 6

这个问题的可能原因是被接受的答案，但这个问题的另一个可能的原因是我遇到的，我想张贴，以防其他人遇到同样的次要原因的问题。

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

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

Answer 7

我不得不说，从昨天晚上10个小时的时候，阅读评论和增加我的经验。 避免UI Bootstrap似乎比它的价值更多的努力。

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

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