- 首页
- 其他开发
- 无法在 Angularjs 中使用 templateUrl 加载模板
无法在 Angularjs 中使用 templateUrl 加载模板
[英] Couldn't load template using templateUrl in Angularjs
本文介绍了无法在 Angularjs 中使用 templateUrl 加载模板的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我只是在学习 Angularjs，以及如何使用 templateUrl 加载模板.
我有一个简单的指令:
var mainApp = angular.module("mainApp", []);mainApp.directive("请求", function() {返回 {限制:E"，范围: {数据: "@"},模板网址:te.html"}})
我尝试像这样使用指令:
<头><script src="js/jquery-2.0.0.js"></script><script src="js/angular.js"></script><link href="css/bootstrap.css" rel="样式表"/><script src="js/bootstrap.js"></script><script src="js/main.js"></script><style type="text/css">div {背景颜色:矢车菊蓝；}#应用面板{宽度:900px；高度:1000px；}</风格><身体><div id="appPanel" ng-app="mainApp" class="container"><div class="row-fluid" style="height: 15%"><div class="span12">标题
<div class="row-fluid" style="height: 85%"><div class="span3" style="height: 100%">行动
<div class="span9" style="height: 100%" ng-controller="AppCtrl"><div ng-repeat="data.requests 中的请求"><请求数据=请求"></request>
</html>
打开页面后，出现此异常:
XMLHttpRequest 无法加载 file:///Users/chengguanli/Documents/workspace-web/ournotes/te.html.Access-Control-Allow-Origin 不允许 Origin null.默认.html:0错误:无法加载模板:te.html出错时(<匿名>)在 file:///Users/chengguanli/Documents/workspace-web/ournotes/js/angular.js:4503:17在 file:///Users/chengguanli/Documents/workspace-web/ournotes/js/angular.js:8898:11在wrappedErrback (file:///Users/chengguanli/Documents/workspace-web/ournotes/js/angular.js:6806:57)在 file:///Users/chengguanli/Documents/workspace-web/ournotes/js/angular.js:6882:53在 Object.Scope.$eval (file:///Users/chengguanli/Documents/workspace-web/ournotes/js/angular.js:8011:28)在 Object.Scope.$digest (file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:7876:25)在 Object.Scope.$apply (file:///Users/chengguanli/Documents/workspace-web/ournotes/js/angular.js:8097:24)完成 (file:///Users/chengguanli/Documents/workspace-web/ournotes/js/angular.js:9111:20)在 completeRequest (file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:9274:7) js/angular.js:5704js/angular.js:5704js/angular.js:4800包裹错误返回 js/angular.js:6808js/angular.js:6882范围.$eval js/angular.js:8011范围.$digest js/angular.js:7876Scope.$apply js/angular.js:8097完成 js/angular.js:9111完成请求 js/angular.js:9274xhr.onreadystatechange js/angular.js:9244
我肯定不会尝试跨域加载模板文件(te.html 与 default.html 位于同一文件夹中).
谁能帮我弄清楚发生了什么?
解决方案
问题是您运行的示例脱离了文件系统(使用 file:// 协议)和许多浏览器(Chrome、Opera) 在使用 file:// 协议时限制 XHR 调用.AngularJS 模板是通过 XHR 下载的，这与 file:// 协议的使用相结合会导致您遇到错误.
在解决这种情况时，您有多种选择:
I am just learning Angularjs, and how to use templateUrl to load a template.
I have a simple directive:
var mainApp = angular.module("mainApp", []);
mainApp.directive("request", function() {
return {
restrict: "E",
scope: {
data: "@"
},
templateUrl: "te.html"
}
})
I try to use the directive like this:
<!DOCTYPE html>
<html>
<head>
<script src="js/jquery-2.0.0.js"></script>
<script src="js/angular.js"></script>
<link href="css/bootstrap.css" rel="stylesheet" />
<script src="js/bootstrap.js"></script>
<script src="js/main.js"></script>
<style type="text/css">
div {
background-color: cornflowerblue;
}
#appPanel {
width: 900px;
height: 1000px;
}
</style>
</head>
<body>
<div id="appPanel" ng-app="mainApp" class="container">
<div class="row-fluid" style="height: 15%">
<div class="span12">
title
</div>
</div>
<div class="row-fluid" style="height: 85%">
<div class="span3" style="height: 100%">
actions
</div>
<div class="span9" style="height: 100%" ng-controller="AppCtrl">
<div ng-repeat="request in data.requests">
<request data="request"></request>
</div>
</div>
</div>
</div>
</body>
</html>
Once I open my page, I got this exception:
XMLHttpRequest cannot load file:///Users/chenguangli/Documents/workspace-web/ournotes/te.html. Origin null is not allowed by Access-Control-Allow-Origin. default.html:0
Error: Failed to load template: te.html
at Error (<anonymous>)
at file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:4503:17
at file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:8898:11
at wrappedErrback (file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:6806:57)
at file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:6882:53
at Object.Scope.$eval (file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:8011:28)
at Object.Scope.$digest (file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:7876:25)
at Object.Scope.$apply (file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:8097:24)
at done (file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:9111:20)
at completeRequest (file:///Users/chenguangli/Documents/workspace-web/ournotes/js/angular.js:9274:7) js/angular.js:5704
js/angular.js:5704
js/angular.js:4800
wrappedErrback js/angular.js:6808
js/angular.js:6882
Scope.$eval js/angular.js:8011
Scope.$digest js/angular.js:7876
Scope.$apply js/angular.js:8097
done js/angular.js:9111
completeRequest js/angular.js:9274
xhr.onreadystatechange js/angular.js:9244
I am not trying load the template file cross domain for sure (te.html is in the same fold where default.html is).
Could anyone help me to figure out what is going on?
解决方案
The problem is that you are running your example off the file system (using the file:// protocol) and many browsers (Chrome, Opera) restricts XHR calls when using the file:// protocol. AngularJS templates are downloaded via XHR and this, combined with the usage of the file:// protocol results in the error you are getting.
You've got several options when it comes to resolving this situation:
这篇关于无法在 Angularjs 中使用 templateUrl 加载模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
