我只是在学习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://协议的使用会导致出现错误。
file://
解决这种情况时,您有几种选择:
<script>