Angularjs ui引导TPL无法加载模板_Angularjs_Twitter Bootstrap

Angularjs ui引导TPL无法加载模板

angularjs twitter-bootstrap

Angularjs ui引导TPL无法加载模板,angularjs,twitter-bootstrap,Angularjs,Twitter Bootstrap,我继承了一个angular项目，它在加载ui引导tpls模块时遇到问题对于它试图从引导中使用的每个指令，我得到如下类似的结果：错误：[$compile:tpload]未能加载模板：template/datepicker/popup.html 我已经了解到需要包含ui引导库的tpls版本。（ui-bootstrap-tpls-0.10.0.js（而不是ui-bootstrap.js）），但在这样做之后，以及作为依赖项（ui.bootstrap、ui.bootstrap.tpls、templat

我继承了一个angular项目，它在加载ui引导tpls模块时遇到问题

对于它试图从引导中使用的每个指令，我得到如下类似的结果：

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

我已经了解到需要包含ui引导库的tpls版本。（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>

以下是错误：

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引导模板，并且您已经仔细检查是否已将（）包含在应用程序中，请检查模板缓存是否因某种原因被禁用/损坏。

有，但你可能根本没有意识到这正在发生

在我的例子中，模态对话框没有打开，并显示错误消息，如

错误：[$compile:tpload]未能加载模板：template/modal/background.html

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

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

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

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

包括ui.bootstrap的tpls版本

src=“assets/bower\u components/angular bootstrap/ui bootstrap tpls.js”

显然，非tpls版本不包含这些模板

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

angular.module（“shiftPlanner”、['ngResource'，'ngRoute'，'ui.bootstrap']）

有关详细信息；）

我也有这个问题，但我只使用ui.bootstrap的tpls版本。在我的例子中，问题是缓存破坏模块

ngCacheBuster

在网络选项卡中，我可以看到在资源调用的末尾有cachebuster参数：

/template/window.html?cb=4889764132

在本例中，bootstrap没有查看它的templatecache，而是决定从这个位置加载文件，这个位置当然不存在

我通过将来自CacheBasting机制的对templates文件夹的所有调用列入白名单来解决这个问题

我希望这将有助于遇到此问题并使用CacheBasting的任何人。

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

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

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

但是，我不确定其他情况（如模板缓存）是否会导致该问题。至少对我来说不是这样。

包括ui.bootstrap.tpls就在ui.bootstrap的正下方对我来说是拦截器产生了错误，我不得不添加以下代码，使其忽略未对api进行的调用：

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

请删除此问题。正如我提到的，我继承了这个项目，出于某种原因，它有一行删除了模板缓存中的所有内容。真不敢相信。哦，顺便说一句，你不需要将ui.bootstrap.tpls注入你的应用程序。bootstrap可以做到这一点。简单包括tpls js文件，而不是ui.bootstrap…js.Thank@Joe7！你的回答引导我找到了解决类似问题的正确方法。HTTP拦截器是原因。我没有删除拦截器，而是添加了一个条件，绕过任何不以

开头的url。对于一个有棱角的新手，这个问题让我学习了$templateCache，我不知道它存在…@RubensMariuzzo我还想绕过引导资源的拦截器（不以/）开头的url，你能给我看看你的拦截器吗？感谢第一个选择（包括ui.bootstrap的tpls版本）让我花了5个小时在一个新的和不熟悉的项目上摸索，直到我找到了你的帖子。非常感谢。这不是问题的解决办法。你只需说明你的问题是什么。请阅读抱歉：）我希望现在更好？

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