無法在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加載模板

回答

相關問題