问题描述
我继承了一个 angular 项目，它在加载 ui-bootstrap-tpls 模块时遇到问题.
I've inherited an angular project, and it's having problems loading the ui-bootstrap-tpls modules.
对于它尝试从引导程序使用的每个指令，我得到类似于以下内容的内容:
For each directive it's trying to use from bootstrap, I get something similar to the following:
错误:[$compile:tpload] 无法加载模板:template/datepicker/popup.html
Error: [$compile:tpload] Failed to load template: template/datepicker/popup.html
我已经读到需要包含 ui-bootstrap 库的 tpls 版本.(ui-bootstrap-tpls-0.10.0.js(而不是 ui-bootstrap.js))，但是已经这样做了以及作为依赖项注入到我的模块中的模块的每个排列(ui.bootstrap，ui.bootstrap.tpls, template/datepicker/datepicker.html')，但我无法击败它.
I've read about the need to include the tpls version of the ui-bootstrap lib. (ui-bootstrap-tpls-0.10.0.js (instead of ui-bootstrap.js)), but having done that as well as every permutation of module injected into my module as a dependency (ui.bootstrap, ui.bootstrap.tpls, template/datepicker/datepicker.html'), but I can't beat it.
这是我的包括:
<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)
推荐答案
我只想发布我针对此错误的解决方案.
I just wanna post my solution for this error.
- 包括 tpls 版本的 ui.bootstrap
- include the tpls version of ui.bootstrap
src="assets/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"
src="assets/bower_components/angular-bootstrap/ui-bootstrap-tpls.js"
显然 none tpls 版本不包含这些模板.
apparently the none tpls version doesn't include those templates.
当你将它注入你的应用程序时，确保你注入的是 ui.bootstrap 而不是 ui.bootstrap.modal
when you inject it into you app, make sure you inject ui.bootstrap and not ui.bootstrap.modal
angular.module("shiftPlanner", ['ngResource', 'ngRoute', 'ui.bootstrap']);
angular.module("shiftPlanner", ['ngResource', 'ngRoute', 'ui.bootstrap']);
了解更多信息 rtfm ;)
这篇关于ui-bootstrap-tpls 加载模板失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！