我只是学习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是在同一个fold.html default.html)。
有谁能帮我找出发生了什么吗？
问题是，你正在运行你的例子离开文件系统(使用file：//协议)和许多浏览器(Chrome，Opera)限制XHR调用时使用file：//协议。 AngularJS模板是通过XHR下载的，这与文件的使用结合：//协议导致您得到的错误。
在解决这种情况时，您有几个选择：
>使用Web服务器运行示例(有许多简单的解决方案，如https://code.google.com/p/mongoose/或几行node.js脚本)
>使用< script>将模板嵌入您的index.html文件中指令：http://docs.angularjs.org/api/ng.directive:script，所以您的模板与主HTML文件一起下载，不再需要通过XHR加载它们
>更改浏览器设置以允许通过文件：//协议进行XHR调用。例如，这可以在Chrome中完成，如：Allow Google Chrome to use XMLHttpRequest to load a URL from a local file
