Impossibile caricare il modello utilizzando templateUrl in Angularjs

Sto imparando semplicemente Angularjs e come utilizzare templateUrl per caricare un modello.Impossibile caricare il modello utilizzando templateUrl in Angularjs

Ho una semplice direttiva:

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

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

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

cerco di utilizzare la direttiva in questo modo:

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

Una volta ho aperto la mia pagina, ho ottenuto questa eccezione:

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

Non sto provando a caricare il file di template cross domain di sicuro (te.html è nella stessa piega dove default.html è).

Qualcuno potrebbe aiutarmi a capire cosa sta succedendo?

fonte

2013-04-27 Ethan Li

Il problema è che si sta eseguendo l'esempio dal file system (utilizzando il protocollo file://) e molti browser (Chrome, Opera) limitano le chiamate XHR quando si utilizza il protocollo file://. I modelli AngularJS vengono scaricati tramite XHR e questo, combinato con l'utilizzo del protocollo file://, genera l'errore che si sta ottenendo.

Hai diverse opzioni quando si tratta di risolvere questa situazione:

eseguire la vostra esempi utilizzando un web server (ci sono molte soluzioni facili come sceneggiatura https://code.google.com/p/mongoose/ o poche righe Node.JS)
modelli di incorporare nel tuo file index.html utilizzando la direttiva <script>: http://docs.angularjs.org/api/ng.directive:script modo i modelli vengono scaricati con il file HTML principale e non è più necessario caricarli tramite XHR
modificare le impostazioni del browser per consentire XHR chiamate via file:// protocollo. Ad esempio, questo può essere fatto in Chrome in questo modo: Allow Google Chrome to use XMLHttpRequest to load a URL from a local file

fonte

2013-04-27 11:35:01

grazie ~~ Inoltre ho scoperto che dal momento che sto usando WebStorm, posso effettivamente avviare la pagina come in un web server integrato –

Eccellente suggerimento per usare il tag dello script. Mi ha salvato qualche problema per un semplice progetto. –

cosa succede se lo sto eseguendo da un cellulare? il mio progetto usa cordova, ad esempio –

Chrome non consente richieste ajax sul protocollo file:.

Dai uno sguardo a: Google Chrome --allow-file-access-from-files disabled for Chrome Beta 8 per una soluzione alternativa, oppure potresti eseguire un server Web sul tuo computer.

fonte

2013-04-27 11:35:45 Guillaume86

grazie ~~ Ho appena capito anche io.a proposito, ho trovato questo link [http://blog.jetbrains.com/webide/2013/03/built-in-server-in-webstorm-6/], dal momento che sto usando WebStorm, posso avviare il mio sito come server web locale –

E qui c'è il problema del revelant chromium (1055 stelle ...): https://code.google.com/p/chromium/issues/detail?id=47416&can=5&colspec=ID%20Pri%20M% 20Iterazione% 20ReleaseBlock% 20Cr% 20Status% 20Owner% 20Summary% 20OS% 20Modified – Guillaume86

quindi se ho un server in esecuzione nella directory con il mio progetto, quale dovrebbe essere il mio templateUrl? In questo momento ho 'directives/filename.html' – broderickga

Se si dispone di Node e NPM installati quindi eseguire: NPM installare http server -g

quindi passare alla cartella che contiene la vostra applicazione ed eseguire: http server

ho trovato il mio risposta in questo SO messaggio: Quick Node Server

È possibile scaricare Nodo qui (NPM è dotato di Node): Node

Spero che questo aiuti!

fonte

2014-06-16 21:21:27 BezR

Modo super rapido per servire il tuo progetto se hai già installato il nodo. Ha funzionato per me sul mio ambiente Windows :) Ho appena ricaricato il mio progetto e tutto ha funzionato. Stavo vivendo lo stesso problema in cui angolare non avrebbe recuperato il file locale per l'url del modello. – rekordboy

quindi se ho un server in esecuzione nella directory con il mio progetto, come dovrebbe apparire il mio templateUrl? In questo momento ho 'direttive/nomefile.html' – broderickga

Impossibile caricare il modello utilizzando templateUrl in Angularjs

risposta

Problemi correlati