角UI引导指令模板失踪 [英] Angular ui bootstrap directive template missing

问题描述

我目前正在测试出角引导的UI 本地我的机器上。当我尝试重新创建手风琴和对话框的例子。我在控制台收到此错误消息说，模板丢失。

  

错误的实施例：
      404未找​​到 - 本地主机/角/模板/ message.html

当我看看 UI的引导-0.1.0.js 指令有一个模板网​​址。

什么是 templateURL 为指令的目的是什么？

难道当我下载了整个角引导的UI zip文件假设这些模板被列入？

我缺少其他文件，我应该包括我的头？

 ＆LT;链接rel =stylesheet属性HREF =包括/ CSS / bootstrap.css＆GT;
＆LT;脚本SRC =包括/ JS / angular.js＆GT;＆LT; / SCRIPT＆GT;
＆LT;脚本SRC =包括/ JS / UI的引导-0.1.0.js＆GT;＆LT; / SCRIPT＆GT;
 

解决方案

您有两种选择：

1. 如果你不想使自己的模板，并希望建的人，你应该下载 UI的引导，第三方物流企业，0.1.0.js 文件 - 注入所有的模板，使他们pre-缓存到您的应用程序：<一href=\"https://github.com/angular-ui/bootstrap/blob/gh-pages/ui-bootstrap-tpls-0.1.0.js#L1322\">https://github.com/angular-ui/bootstrap/blob/gh-pages/ui-bootstrap-tpls-0.1.0.js#L1322




2. 如果你想制作一些自己的模板，创建一个模板文件夹中的应用程序，并从角UI /引导下载模板项目。然后覆盖你想定制你自己的人。

在这里阅读更多：<一href=\"https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files\">https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files

修改

您还可以下载引导-tpls.js仍然覆盖一些指令的templateUrls用你自己的，使用的是AngularJS装饰来改变指令的templateUrl。这里有一个例子是变化的日期选择器的templateUrl：

<一个href=\"http://docs.angularjs.org/api/AUTO.%24provide#methods_decorator\">http://docs.angularjs.org/api/AUTO.$provide#methods_decorator

  myApp.config（函数（$提供）{
  $ provide.decorator（'datepickerDirective'，函数（$代表）{
    //现在我们得到的所有datepickerDirectives的数组，
    //和使用第一个
    $代表[0] .templateUrl ='我的/模板/ url.html';
    返回$代表;
  }）;
}）;
 

I'm currently testing out angular bootstrap-UI locally on my machine. When I try to recreate the example of accordion and dialog box. I get this error message in my console saying that template is missing.

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

When I look into ui-bootstrap-0.1.0.js the directive have a template URL.

What's the purpose of the templateURL for the directive?

Are those template suppose to be included when I download the whole angular bootstrap-UI zip file?

Am I missing other files that I should have include in my 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>

解决方案

You have two choices:

1. If you don't want to make your own templates and want the built in ones, you should download the ui-bootstrap-tpls-0.1.0.js file - this injects all the templates so they are pre-cached into your app: https://github.com/angular-ui/bootstrap/blob/gh-pages/ui-bootstrap-tpls-0.1.0.js#L1322

2. If you do want to make some of your own templates, create a templates folder in your app, and download the templates from the angular-ui/bootstrap project. Then overwrite the ones you want to customize on your own.

Read more here: https://github.com/angular-ui/bootstrap/tree/gh-pages#build-files

edit:

You can also download bootstrap-tpls.js and still overwrite some of the directive's templateUrls with your own, using an AngularJS decorator to change the directive's templateUrl. Here's an example that change's datepicker's 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;
  });
});

这篇关于角UI引导指令模板失踪的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！