Vorlage konnte nicht mit templateUrl in Angularjs geladen werden

Ich lerne gerade Angularjs und wie TemplateErl verwendet wird, um eine Vorlage zu laden.Vorlage konnte nicht mit templateUrl in Angularjs geladen werden

Ich habe eine einfache Richtlinie:

var mainApp = angular.module("mainApp", []); 

mainApp.directive("request", function() { 
    return { 
     restrict: "E", 

     scope: { 
      data: "@" 
     }, 
     templateUrl: "te.html" 
    } 
})

Ich versuche, die Richtlinie wie folgt zu verwenden:

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

<!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>

Sobald ich meine Seite zu öffnen, ich diese Ausnahme bekam

Ich versuche nicht, die Template-Datei Cross-Domain sicher zu laden (te.html ist in der gleichen Falte, wo default.html ist).

Kann mir jemand helfen herauszufinden, was vor sich geht?

Quelle

2013-04-27 Ethan Li

Das Problem ist, dass Sie Ihr Beispiel aus dem Dateisystem (mit dem file:// Protokoll) ausführen und viele Browser (Chrome, Opera) XHR-Anrufe bei der Verwendung des file:// Protokolls beschränkt. AngularJS Templates werden über XHR heruntergeladen. Dies führt zusammen mit der Verwendung des file:// Protokolls zu dem Fehler, den Sie bekommen.

Sie haben mehrere Möglichkeiten, wenn es um die Lösung dieser Situation kommt:

Ihre Beispiele Führen Sie einen Web-Server mit (es viele einfache Lösungen wie https://code.google.com/p/mongoose/ oder ein paar Zeilen node.js Skript sind)
Embed-Vorlagen in Ihrer Datei index.html mit der <script> Direktive: http://docs.angularjs.org/api/ng.directive:script so werden die Vorlagen mit der Haupt-HTML-Datei heruntergeladen und es ist nicht mehr notwendig, sie über XHR
Ihre Browser-Einstellungen ändern XHR, damit Anrufe über die file:// Protokoll. Zum Beispiel kann dies wie so in Chrome geschehen: Allow Google Chrome to use XMLHttpRequest to load a URL from a local file

Quelle

2013-04-27 11:35:01

danke ~~ Ich habe auch herausgefunden, dass, seit ich WebStorm verwende, ich die Seite wie in einem integrierten Webserver starten kann –

Hervorragender Vorschlag, das Skript-Tag zu verwenden. Sparte mir einige Probleme für ein einfaches Projekt. –

Was ist, wenn ich es von einem Handy aus starte? Mein Projekt verwendet Cordova, zum Beispiel –

Chrome nicht AJAX-Anfragen auf das file: Protokoll ermöglichen.

Werfen Sie einen Blick auf: Google Chrome --allow-file-access-from-files disabled for Chrome Beta 8 für eine Problemumgehung, oder Sie könnten einen Webserver auf Ihrem Computer ausführen.

Quelle

2013-04-27 11:35:45 Guillaume86

danke ~~ Ich habe es gerade herausgefunden.übrigens, ich fand diesen Link [http://blog.jetbrains.com/webide/2013/03/built-in-server-in-webstorm-6/], da ich WebStorm verwende, kann ich meine Website starten als lokaler Webserver –

Und hier ist das Thema revellant chrom (1055 Sterne ...): https://code.google.com/p/chromium/issues/detail?id=47416&can=5&colspec=ID%20Pri%20M% 20Iteration% 20ReleaseBlock% 20Cr% 20Status% 20Owner% 20Summary% 20OS% 20Modifiziert – Guillaume86

also, wenn ich einen Server im Verzeichnis mit meinem Projekt habe, wie soll meine TemplateUrl aussehen? Im Moment habe ich 'Direktiven/Dateiname.html' – broderickga

Wenn Sie Knoten und NPM dann laufen installiert: npm installieren http-Server -g

dann zu dem Ordner mit Ihrer App navigieren und ausführen: http-Server

fand ich meine Antwort in diesem SO Beitrag: Quick Node Server

Sie Knoten hier herunterladen können (NPM kommt mit Node): Node

Hoffe das hilft!

Quelle

2014-06-16 21:21:27 BezR

Super schnelle Möglichkeit, Ihr Projekt zu dienen, wenn Sie bereits Knoten installiert haben. Arbeitete für mich auf meiner Windows-Umgebung :) Just reloade mein Projekt und alles hat funktioniert. Ich hatte das gleiche Problem, bei dem eckle die lokale Datei für die Vorlagen-URL nicht abrufen konnte. – rekordboy

Also, wenn ich einen Server im Verzeichnis mit meinem Projekt habe, wie soll meine TemplateUrl aussehen? Jetzt habe ich 'directives/filename.html' – broderickga

Vorlage konnte nicht mit templateUrl in Angularjs geladen werden

Antwort

Verwandte Themen