oninit Impossibile caricare il modello utilizzando templateUrl in Angularjs




oninit directive angularjs (3)

Sto solo imparando Angularjs e come usare templateUrl per caricare un modello.

Ho una semplice direttiva:

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

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

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

Provo ad usare 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 che apro 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 fold dove default.html è).

Qualcuno potrebbe aiutarmi a capire cosa sta succedendo?


Se hai installato Node e NPM, esegui: npm installa http-server -g

Quindi vai alla cartella contenente la tua app ed esegui: http-server

Ho trovato la mia risposta in questo post SO: Quick Node Server

Puoi scaricare Node qui (NPM viene fornito con Node): Node

Spero che questo ti aiuti!


Il problema è che stai eseguendo il tuo esempio dal file system (usando 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 file:// protocollo, genera l'errore che si sta ottenendo.

Hai diverse opzioni quando si tratta di risolvere questa situazione:

  • Esegui i tuoi esempi usando un server web (ci sono molte soluzioni facili come https://code.google.com/p/mongoose/ o poche righe script node.js)
  • Incorpora modelli nel tuo file index.html utilizzando la direttiva <script> : http://docs.angularjs.org/api/ng.directive:script così i tuoi modelli vengono scaricati con il file HTML principale e non è più necessario caricare loro tramite XHR
  • Modifica le impostazioni del browser per consentire le chiamate XHR tramite il protocollo file:// . Ad esempio, questo può essere fatto in Chrome in questo modo: consenti a Google Chrome di utilizzare XMLHttpRequest per caricare un URL da un file locale





angularjs