2014-11-07 10 views
7

Tôi hiện đang phát triển một dự án giáo dục nhỏ bằng HTML5, CSS, JS và AngularJS.Tải chỉ thị động bằng AngularJS - Lỗi: Truy cập vào URI bị hạn chế bị từ chối

Vấn đề: tải của một AngularJS Chỉ trong file index.html của tôi

Lỗi mã [1] - Trình duyệt Local

Error: Access to restricted URI denied

Một số câu trả lời cho câu hỏi này, đề nghị triển khai dự án trên máy chủ web. Tôi đã làm nó và lỗi rất thú vị:

Error code [2] - Webserver

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


cấu trúc file

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

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' 
     } 
    }); 

Xin lỗi cho đăng bài dài, nhưng tôi đã cố gắng để làm cho nó rõ ràng, dễ hiểu và dễ dàng hơn để tìm ra vấn đề.


Sau khi tất cả tôi bị kẹt trên lỗi này và tôi không thể sửa lỗi này.

Tôi có cố gắng để di chuyểntất cả các file trong một thư mục và nó kỳ diệu làm việc! Nhưng khi tôi tách riêng chúng trong các thư mục khác nhau = ERROR. Tôi không thể làm cho nó hoạt động!

Hãy giúp tôi :)

############################ ĐÁP

Sau khi thay đổi các đường dẫn tương đối để có một vòng loại đầy đủ trước họ, như được đề xuất trong bài tiếp theo, mọi thứ đều ổn!

Cảm ơn bạn!

Trả lời

13

Giả sử này được ném lỗi:

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

Bạn cần phải sử dụng đường dẫn đầy đủ.

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

Tôi sẽ thử vào ngày mai và nếu nó hoạt động, tôi sẽ kiểm tra tại đây !! – Stuci

+0

Điều này phù hợp với tôi! – ehsan88

Các vấn đề liên quan