ui-bootstrap-tpls 加载模板失败答案

【问题标题】：ui-bootstrap-tpls failed to load templateui-bootstrap-tpls 加载模板失败
【发布时间】：2014-10-14 04:19:09
【问题描述】：

我继承了一个 Angular 项目，但在加载 ui-bootstrap-tpls 模块时遇到问题。

对于它尝试从引导程序使用的每个指令，我得到类似于以下内容：

错误：[$compile:tpload] 加载模板失败：template/datepicker/popup.html

我已经了解需要包含 tpls 版本的 ui-bootstrap 库。（ui-bootstrap-tpls-0.10.0.js（而不是 ui-bootstrap.js）），但是已经做到了这一点以及作为依赖注入到我的模块中的模块的每个排列（ui.bootstrap，ui.bootstrap。 tpls, template/datepicker/datepicker.html')，但我打不过。

这是我的包括：

<html class="no-js" ng-app="hiringApp">
<head>
    <meta charset="utf-8">
    <title>@ViewBag.Title</title>
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">
    <meta name="layout" content="IRLayout">

    <!-- styles IRLayout-->
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.0-beta.1/css/jquery.dataTables.css">
    <!-- BootStrap -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">

    <!-- font-awesome -->
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">

    <link rel="stylesheet" href="@Url.Content("~/content/css/layout.css")">
    <link rel="stylesheet" href="@Url.Content("~/content/css/normalize.css")">
    <link rel="stylesheet" href="@Url.Content("~/content/css/main.css")">
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/css/Upload.css")">

    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smoothness/jquery-ui.css" />
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/content/css/styles.css")">
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/content/css/site-specific.css")">
    <link rel="stylesheet" type="text/css" href="@Url.Content("~/content/css/rating.css")">

    <!-- Upload -->
    @*<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Upload.css")">*@

    <!-- Header Scripts-->
    <!-- Jquery & Jquery UI -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
    <script src="@Url.Content("~/Scripts/Vendor/underscore-min.js")"></script>

    <!-- BootStrap -->
    <!-- Validate -->
    <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
    <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.min.js"></script>

    <!-- Analytics -->
    <script src="//cdn.datatables.net/1.10.0-beta.1/js/jquery.dataTables.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/graphael/0.5.1/g.raphael-min.js"></script>

    <!-- Angular -->
          <!--  
          <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
          <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-animate.min.js"></script>
          <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-resource.min.js"></script>
          <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.min.js"></script>
            -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular-resource.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"></script>

    <script src="@Url.Content("~/Scripts/app.js")"></script>
    <script src="@Url.Content("~/Scripts/controllers.js")"></script>
    <script src="@Url.Content("~/Scripts/directives.js")"></script>
    <script src="@Url.Content("~/Scripts/filters.js")"></script>
    <script src="@Url.Content("~/Scripts/services.js")"></script>
    <script>
        angular.module("hiringApp").constant("$userProvider", @Model.User.SystemRoles);
        angular.module("hiringApp").constant("$jobProvider", '');
    </script>

    <!-- Upload -->
    <script src="@Url.Content("~/content/js/plupload.full.js")"></script>
    <script src="@Url.Content("~/content/js/UploadImage.js")"></script>

    <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'></script>
    <script src="~/Content/js/audio/irAudioRecorder.js"></script>
    @RenderSection("script", required: false)
</head>

这是我的应用模块：

var hiringApp = angular.module('hiringApp', ['ui.router', 'ngAnimate', 'ngResource', 'filters', 'ui.bootstrap', 'ui.bootstrap.tpls']);

这是错误：

GET http://localhost:54720/template/tooltip/tooltip-popup.html 404 (Not Found) angular.js:8539
7Error: [$compile:tpload] Failed to load template: template/tooltip/tooltip-popup.html
http://errors.angularjs.org/1.2.22/$compile/tpload?p0=template%2Ftooltip%2Ftooltip-popup.html
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:78:12
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:6900:17
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:8098:11
    at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
    at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
    at wrappedErrback (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11555:78)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:11688:76
    at Scope.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12658:28)
    at Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12470:31)
    at Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.js:12762:24)

【问题讨论】：

请删除这个问题。正如我所提到的，我继承了这个项目，并且由于某种原因，它有一行从模板缓存中删除了所有内容。简直不敢相信。
哦，为了记录，您不需要将 ui.bootstrap.tpls 注入您的应用程序。 ui.bootstrap 就是这样做的。简单地包含 tpls js 文件而不是 ui.bootstrap...js。

标签： angularjs twitter-bootstrap

【解决方案1】：

我只是想发布这个错误的解决方案。

包括 tpls 版本的 ui.bootstrap

src="assets/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"

显然 none tpls 版本不包含这些模板。

当您将其注入您的应用程序时，请确保您注入的是 ui.bootstrap 而不是 ui.bootstrap.modal

angular.module("shiftPlanner", ['ngResource', 'ngRoute', 'ui.bootstrap']);

更多信息rtfm ;)

【讨论】：

第一个选项（包括 ui.bootstrap 的 tpls 版本）对我有用

【解决方案2】：

我遇到了一个非常相似的问题，感谢您的评论，Glenn 能够解决它。因此，我想将其包装成一个更一般的答案，希望对其他人有所帮助：

如果 UI Bootstrap 模板无法加载，并且您已经仔细检查您是否已将 the right module from the right JS file (and only it) 包含到您的应用中，请检查模板缓存是否因某种原因被禁用/损坏。

有multiple ways to disable or clear the cache，人们可能根本不知道这正在发生。

在我的情况下，模式对话框没有打开并显示Error: [$compile:tpload] Failed to load template: template/modal/backdrop.html 之类的错误消息。

我从从 JBoss 开发者页面下载的a great template project 开始，该页面在应用程序定义中包含以下几行：

var xpApp = angular.module('kitchensink', ['ui.bootstrap',...])
.config(... {
    /*
     * Use a HTTP interceptor to add a nonce to every request to prevent MSIE from caching responses.
     */
    $httpProvider.interceptors.push('ajaxNonceInterceptor');
...

.factory('ajaxNonceInterceptor', function() {
// This interceptor is equivalent to the behavior induced by $.ajaxSetup({cache:false});

var param_start = /\?/;

return {
    request : function(config) {
        if (config.method == 'GET') {
            // Add a query parameter named '_' to the URL, with a value equal to the current timestamp
            config.url += (param_start.test(config.url) ? "&" : "?") + '_=' + new Date().getTime();
            }
            return config;
        }
    }
});

一旦我删除了拦截器，模式对话框就会显示出来。

【讨论】：

谢谢@Joe7！您的回答使我找到了解决类似问题的正确方法。 HTTP拦截器是原因。 我没有删除拦截器，而是添加了一个条件来绕过任何不以/开头的url
对于一个有角度的新手，这个问题让我学习了我不知道存在的 $templateCache...
@RubensMariuzzo 我也想绕过引导资源的拦截器（不以 / 开头的 url），你能告诉我你的拦截器吗？谢谢

【解决方案3】：

我也遇到过这个问题，但我只使用了 tpls 版本的 ui.bootstrap。就我而言，问题是缓存破坏模块ngCacheBuster。

在网络选项卡中，我可以看到资源调用结束时有 cachebuster 参数：

/template/window.html?cb=4889764132

在这种情况下，bootstrap 没有查看它的模板缓存，而是决定从这个位置加载文件，这当然不存在。

我通过将 cachebusting 机制中对模板文件夹的所有调用列入白名单来解决这个问题。

我希望这对任何遇到此问题并使用 cachebusting 的人有所帮助。

【讨论】：

花了我 5 个小时在一个新的和不熟悉的项目上闲逛，直到我找到了你的帖子。谢谢！！

【解决方案4】：

在 ui.bootstrap 正下方包含 ui.bootstrap.tpls

【讨论】：

【解决方案5】：

确保您不仅包含了 ui-bootstrap.js，还包含了 ui-bootstrap-tpls.js

【讨论】：

【解决方案6】：

对我来说，是拦截器产生了错误，我必须添加以下代码以使其忽略未对我的 api 进行的调用：

if (config.url.indexOf('templates/') == 0 || config.url.indexOf('uib/') == 0) 
{
   console.log('ignoring '+config.url);
   return config;
}

【讨论】：

这不是问题的解决方案。您只需说明您的问题是什么。请阅读How do I write a good answer?
很抱歉 :) 我希望现在好些了吗？

【解决方案7】：

是的。我像这样解决了这个问题..并通过包含 ui-bootstrap-tpls.js

angular.module('mainModule', ['ui.bootstrap', 'sub-module']);
angular.module('sub-module', ['ui.bootstrap.modal']);

但是我不确定模板缓存等其他情况是否会导致问题。至少不适合我..

【讨论】：