Angular ui bootstrap指令模板缺失

Question

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

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

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

templateURL该指令的目的是什么？

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

Answer 1

你有两个选择:

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;
  });
});

Answer 2

这个问题浪费了2个小时我的5美分.你应该:

1. 转到http://angular-ui.github.io/bootstrap/.单击"创建自定义构建"并选择您使用的功能.(没有必要为一件物品拉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来改变加载顺序.这解决了问题.但是,后来我注意到(如上所述)只需要一个lib.所以我删除了ui-bootstrap.js.