无法在Angularjs中使用templateUrl加载模板

我刚刚在学习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位于同一个折叠处）。

任何人都可以帮我弄清楚发生了什么事吗？

来源

2013-04-27 Ethan Li

问题是，您正在使用file://协议在文件系统上运行示例（使用协议file://），许多浏览器（Chrome，Opera）限制XHR呼叫。 AngularJS模板是通过XHR下载的，这与file://协议的使用相结合会导致错误。

你有几种选择，当谈到解决这种情况：

运行使用网络服务器的实例（也有像https://code.google.com/p/mongoose/或几行的node.js脚本许多简单的解决方案）

<script>

嵌入模板：http://docs.angularjs.org/api/ng.directive:script所以你的模板与主HTML文件下载，它不再需要通过XHR
更改浏览器设置，允许XHR调用在file://协议。例如，Chrome可以这样做：Allow Google Chrome to use XMLHttpRequest to load a URL from a local file

来源

2013-04-27 11:35:01

thanks ~~我还发现，因为我使用的是WebStorm，所以我可以在内置的web服务器上启动页面。 – 2013-04-27 11:39:57

极好的建议是使用脚本标签。为一个简单的项目节省了一些麻烦。 – 2015-05-31 22:12:39

如果我从移动设备上运行它，该怎么办？我的项目使用科尔多瓦，例如 – 2015-09-02 01:29:42

Chrome不允许在file:协议上使用ajax请求。

看看：Google Chrome --allow-file-access-from-files disabled for Chrome Beta 8的解决方法，或者您可以在您的计算机上运行Web服务器。

来源

2013-04-27 11:35:45 Guillaume86

谢谢~~我只是想出了它。顺便说一下，我发现这个链接[http://blog.jetbrains.com/webide/2013/03/built-in-server-in-webstorm-6/]，因为我使用WebStorm，我可以启动我的网站作为本地网络服务器 – 2013-04-27 11:38:15

以下是相关的铬问题（1055颗星......）：https://code.google.com/p/chromium/issues/detail?id=47416&can=5&colspec=ID%20Pri%20M% 20Iteration％20ReleaseBlock％20Cr％20Status％20Owner％20Summary％20OS％20Modified – Guillaume86 2013-04-27 11:40:34

所以如果我有一个服务器运行在我的项目目录中，我的templateUrl应该是什么样子？现在我有'directives/filename.html' – broderickga 2015-08-18 23:42:16

如果你有节点和NPM装然后运行：NPM安装HTTP服务器-g

然后导航到该文件夹包含您的应用程序，然后运行：HTTP服务器

我发现我的回答这个SO职位：Quick Node Server

你可以在这里下载节点（NPM自带节点）：Node

希望这有助于！

来源

2014-06-16 21:21:27 BezR

如果你已经安装了节点，超快速的方式来为你的项目提供服务。在我的Windows环境中为我工作:)只需重新安装我的项目，一切正常。我遇到同样的问题，角度不会检索模板url的本地文件。 – rekordboy 2015-01-03 07:18:42

因此，如果我有一个服务器在我的项目目录中运行，我的templateUrl应该是什么样子？现在我有'directives/filename.html' – broderickga 2015-08-18 23:42:30

无法在Angularjs中使用templateUrl加载模板

回答

相关问题