我刚刚学习 Angularjs，以及如何使用 templateUrl 加载模板。
我有一个简单的指令：
var mainApp = angular.module("mainApp", []);
mainApp.directive("request", function() {
return {
restrict: "E",
scope: {
data: "@"
},
templateUrl: "te.html"
}
})
我尝试使用这样的指令：
<!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>
一旦我打开我的页面，我就得到了这个异常：
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
我肯定不会尝试跨域加载模板文件（te.html 与 default.html 位于同一文件夹中）。
谁能帮我弄清楚发生了什么事吗？
问题是您正在从文件系统运行您的示例（使用file://协议）和许多浏览器（Chrome、Opera）在使用时限制 XHR 调用file://协议。 AngularJS 模板通过 XHR 下载，并结合使用file://协议会导致您收到错误。
解决这种情况时，您有多种选择：
- 使用网络服务器运行您的示例（有许多简单的解决方案，例如https://code.google.com/p/mongoose/ https://code.google.com/p/mongoose/或几行node.js脚本）
- 使用以下命令将模板嵌入到您的 index.html 文件中
<script>指示：http://docs.angularjs.org/api/ng.directive:脚本 http://docs.angularjs.org/api/ng.directive:script因此您的模板将与主 HTML 文件一起下载，不再需要通过 XHR 加载它们
- 更改您的浏览器设置以允许通过 XHR 调用
file://协议。例如，这可以在 Chrome 中完成，如下所示：允许 Google Chrome 使用 XMLHttpRequest 从本地文件加载 URL https://stackoverflow.com/q/4819060/1418796
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
