缺少Angular UI Bootstrap指令模板

一尘不染

缺少Angular UI Bootstrap指令模板

angularjs

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

错误示例：404未找到-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>

阅读 217

2020-07-04

共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
如果确实要制作一些自己的模板，请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;
  });
});

2020-07-04