Nie można wczytać szablonu przy użyciu szablonu TemplateUrl w Angularjs

Właśnie uczę się języka Angularjs i używam szablonu templateUrl do ładowania szablonu.Nie można wczytać szablonu przy użyciu szablonu TemplateUrl w Angularjs

Mam proste dyrektywy:

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

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

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

Próbuję użyć dyrektywy takiego:

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

Gdy otwieram moją stronę, mam ten wyjątek:

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

Nie próbuję na pewno załadować crossowej domeny pliku szablonu (te.html znajduje się w tym samym folderze, gdzie znajduje się default.html).

Czy ktoś może mi pomóc dowiedzieć się, co się dzieje?

Źródło

2013-04-27 Ethan Li

Problem polega na tym, że uruchamiasz swój przykład z systemu plików (używając protokołu file://), a wiele przeglądarek (Chrome, Opera) ogranicza połączenia XHR podczas korzystania z protokołu file://. Szablony AngularJS są pobierane przez XHR, co w połączeniu z protokołem file:// powoduje otrzymanie błędu.

Masz kilka opcji, jeśli chodzi o rozwiązanie tej sytuacji:

Uruchom swoje przykłady z wykorzystaniem serwera internetowego (istnieje wiele prostych rozwiązań, takich jak skrypt https://code.google.com/p/mongoose/ lub kilku linii node.js)
Osadź szablony w pliku index.html za pomocą dyrektywy <script>: http://docs.angularjs.org/api/ng.directive:script, więc szablony są pobierane z głównym plikiem HTML i nie trzeba już ładować ich za pomocą XHR
Zmień ustawienia przeglądarki, aby umożliwić wywoływanie XHR przez file:// protokół. Na przykład można to zrobić w przeglądarce Chrome w następujący sposób: Allow Google Chrome to use XMLHttpRequest to load a URL from a local file

Źródło

2013-04-27 11:35:01

dziękuję ~~ Odkryłem również, że skoro używam WebStorm, mogę faktycznie uruchomić stronę jak we wbudowanym serwerze WWW. –

Doskonała propozycja użycia znacznika skryptu. Uratowało mnie trochę kłopotów dla prostego projektu. –

co, jeśli używam go z telefonu komórkowego? mój projekt używa cordova, na przykład –

Chrome nie zezwala na żądania ajax w protokole file:.

Aby obejść, obejrzyj: Google Chrome --allow-file-access-from-files disabled for Chrome Beta 8 lub uruchom serwer WWW na swoim komputerze.

Źródło

2013-04-27 11:35:45 Guillaume86

dzięki ~~ Po prostu to rozgryzłem.przy okazji, znalazłem ten link [http://blog.jetbrains.com/webide/2013/03/built-in-server-in-webstorm-6/], ponieważ używam WebStorm, mogę uruchomić moją stronę jako lokalny serwer sieciowy –

A tutaj jest rewelacyjny problem z chromem (1055 gwiazdek ...): https://code.google.com/p/chromium/issues/detail?id=47416&can=5&colspec=ID%20Pri%20M% 20Identycja% 20Zgnieciony% 20Cr% 20Status% 20Owner% 20Podsumowanie% 20OS% 20Zmodyfikowany – Guillaume86

więc jeśli mam serwer uruchomiony w katalogu z moim projektem, jak powinien wyglądać mój templateUrl? Teraz mam 'directives/filename.html' – broderickga

Jeśli masz Node i NPM zainstalowany, uruchom: npm zainstalować serwer HTTP -g

następnie przejdź do folderu zawierającego aplikację i uruchomić: serwer HTTP

znalazłem mój odpowiedzieć w tym SO post: Quick Node Server

można pobrać tutaj Node (NPM pochodzi z węzłem): Node

Mam nadzieję, że to pomoże!

Źródło

2014-06-16 21:21:27 BezR

Super szybki sposób obsługi twojego projektu, jeśli masz już zainstalowany węzeł. Pracował dla mnie w moim środowisku Windows :) Po prostu przeprowadź renowację mojego projektu i wszystko działało. Wystąpił ten sam problem, w którym kątowe nie pobrałoby lokalnego pliku dla adresu URL szablonu. – rekordboy

więc jeśli mam serwer działający w katalogu z moim projektem, jak powinien wyglądać mój templateUrl? W tej chwili mam 'directives/filename.html' – broderickga

Nie można wczytać szablonu przy użyciu szablonu TemplateUrl w Angularjs

Odpowiedz

Powiązane problemy