无法在Angularjs中使用templateUrl加载模板
我只是学习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）在使用file://协议时限制XHR调用。 AngularJS模板是通过XHR下载的，结合使用file://协议会导致错误。
在解决这种情况时，您有几个select：
- 使用Web服务器运行您的示例（有许多简单的解决scheme，如https://code.google.com/p/mongoose/或几行node.js脚本）;
- 使用
<script>指令在您的index.html文件中embedded模板： http : //docs.angularjs.org/api/ng.directive :<script>这样您的模板将与主HTML文件一起下载，不再需要加载他们通过XHR - 更改您的浏览器设置，以允许通过
file://协议进行XHR调用。 例如，这可以在Chrome中完成，如下所示： 允许Google Chrome使用XMLHttpRequest从本地文件加载URL
如果您安装了Node和NPM，则运行： npm install http-server -g
然后导航到包含您的应用程序的文件夹，然后运行： http-server
我在这篇文章中find了我的答案： 快速节点服务器
您可以在这里下载节点（NPM自带节点）： 节点
希望这可以帮助！
Chrome不允许在file:协议上使用Ajax请求。
看看： 谷歌浏览器 – 禁用文件访问从文件禁用的Chrome 8的变通办法，或者你可以运行在您的计算机上的Web服务器。
