angularjs - Angular ui 引导指令模板丢失

Question

我目前正在我的计算机上本地测试 Angular bootstrap-UI。当我尝试重新创建 Accordion 和对话框的示例时。我在控制台中收到此错误消息，指出模板丢失。

Example of error: 404 Not Found - localhost/angular/template/message.html

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

该指令的 templateURL 的用途是什么？

当我下载整个 Angular bootstrap-UI zip 文件时，这些模板是否应该包含在内？

我是否缺少应包含在 header 中的其他文件？

<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 文件 - 这会注入(inject)所有模板，以便它们预先缓存到您的应用程序中: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，并使用 AngularJS 装饰器更改指令的 templateUrl，仍然用您自己的指令覆盖某些 templateUrl。以下是更改日期选择器 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;
  });
});