2014-11-07 14 views
7

Obecnie rozwijam mały projekt edukacyjny z wykorzystaniem HTML5, CSS, JS i AngularJS.Dynamiczna dyrektywa ładowanie za pomocą AngularJS - Błąd: odmowa dostępu do zastrzeżonego URI

Problem: Ładowanie dyrektywy angularjs w moim pliku index.html

Kod błędu [1] - przeglądarki Local

Error: Access to restricted URI denied

kilka odpowiedzi na to pytanie, zasugerował, aby wdrożyć projekt na serwerze sieciowym. Zrobiłem to, a błąd był bardzo interesujący:

Kod błędu [2] - Serwer

Failed to load resource: the server responded with a status of 404 (Not Found)


Struktura plików

app/ 
---- app.js 
---- components/ 
---------- view1/ 
-------------- fullView.html 
-------------- fullViewApp.js 
-------------- partialViews/ 
------------------ partsOfFullView.html 
------------------ morePartsOfFullView.html 
assets/ 
---- libs/ 
---- css/ 
---- ... 
---- ... 
index.html 

Kod

index.html

<!DOCTYPE html> 
<html ng-app="MyApp"> 
<head> 
    <meta charset="utf-8"> 
    <title>My Example</title> 

    <!-- CSS --> 
    <link href="./assets/css/bootstrap.min.css" rel="stylesheet"> 
    <link href="./assets/css/bootstrap-datetimepicker.min.css" rel="stylesheet"> 
    <!-- Libs --> 
    <script src="./assets/libs/jquery-2.1.1.min.js"></script> 
    <script src="./assets/libs/angular.min.js"></script> 
    <script src="./assets/libs/bootstrap.min.js"></script> 
    <script src="./assets/libs/moment-with-locales.js"></script> 
    <script src="./assets/libs/bootstrap-datetimepicker.min.js"></script> 
    <!-- App's modules --> 
    <script type="text/javascript" src="./app/app.js"></script> 
    <script type="text/javascript" src="./app/components/view1/fullViewApp.js"></script> 
</head> 
<body ng-controller="MyAppTranslationCtrl"> 
    <!-- my custom directive --> 
    <qwe></qwe> 
</body> 
</html> 

app.js

angular.module('MyApp', ['MyApp.View1App']) 
    .controller('MyAppTranslationCtrl', function($scope) { 
     console.log('-> MyApp Translation example'); 
    }); 

fullView.html

<div ng-app="MyApp.View1App" ng-controller="..."> 
    <div ng-controller="..."> 
     <!-- content, other directives, etc... --> 
     ... 
     ... 
    </div> 
</div> 

fullViewApp.js

angular.module('MyApp.View1App', []) 
.directive('qwe', function() { 
     return { 
      restrict: 'E', 
      templateUrl: 'fullView.html' 
     } 
    }); 

Przepraszam za długi post, ale starałem się, aby było jasne, zrozumiałe i łatwiejsze do znalezienia problemu.


Przecież siedzę na tym błędzie i nie mogę to naprawić.

mam próbował przenieść wszystkie z plików w jednym folderze i magicznie działa! Ale kiedy oddzielić je w różnych folderów = BŁĄD. Nie mogę tego uruchomić!

Proszę mi pomóc :)

############################ ODPOWIEDŹ

Po zmianie względne ścieżki, aby mieć pełen kwalifikator przed nimi, jak zasugerowano w następnym poście, wszystko było w porządku!

Dziękujemy!

Odpowiedz

13

Zakładając ten rzuca błąd:

angular.module('MyApp.View1App', []) 
.directive('qwe', function() { 
     return { 
      restrict: 'E', 
      templateUrl: 'fullView.html' 
     } 
    }); 

trzeba użyć pełnej ścieżki.

angular.module('MyApp.View1App', []) 
.directive('qwe', function() { 
     return { 
      restrict: 'E', 
      templateUrl: 'app/components/view1/fullView.html' 
     } 
    }); 
+0

Spróbuję tego jutro, a jeśli zadziała, sprawdzę to tutaj !! – Stuci

+0

To zadziałało dla mnie! – ehsan88