Gle*_*ock 17 twitter-bootstrap angularjs
我继承了一个角度项目,并且在加载ui-bootstrap-tpls模块时遇到了问题.
对于它试图在bootstrap中使用的每个指令,我得到类似于以下内容的东西:
错误:[$ compile:tpload]无法加载模板:template/datepicker/popup.html
我已经读过需要包含ui-bootstrap lib的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>
这是我的app模块:
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)
Jon*_*mek 27
我只是想发布我的解决方案来解决这个错误.
SRC = "资产/ bower_components /角度的自举/ UI的自举-tpls.js"
显然,无tpls版本不包括那些模板.
当你将它注入你的应用程序时,请确保注入ui.bootstrap而不是ui.bootstrap.modal
angular.module("shiftPlanner",['ngResource','ngRoute','ui.bootstrap']);
了解更多信息rtfm ;)
Joe*_*oe7 21
我有一个非常相似的问题,并且由于你的评论,Glenn能够解决它.因此,我想将其包含在一个更普遍的答案中,希望对许多其他人有所帮助:
如果UI Bootstrap模板无法加载,并且您已经仔细检查过您已将正确的JS文件(并且只有它)中的正确模块包含到您的应用程序中,请检查模板缓存是否因某种原因被禁用/中断.
有多种方法可以禁用或清除缓存,有些人可能根本不知道这种情况正在发生.
在我的情况下,模态对话框没有打开错误消息,如Error: [$compile:tpload] Failed to load template: template/modal/backdrop.html.
我从一个从JBoss Developer页面下载的一个很棒的模板项目开始,它在应用程序定义中包含以下几行:
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版本.在我的例子中,问题是缓存清除模块ngCacheBuster.
在网络选项卡中,我可以看到资源调用结束时有cachebuster参数:
/template/window.html?cb=4889764132
在这种情况下,bootstrap没有查看其templatecache,但决定从该位置加载文件,当然这不存在.
我通过将来自cachebusting机制的所有对templates文件夹的调用列入白名单来解决这个问题.
我希望这对任何遇到此问题并使用cachebusting的人都有帮助.
| 归档时间： |
|
| 查看次数： |
28567 次 |
| 最近记录： |