javascript 使用 AngularJS 加载动态指令 - 错误：访问受限 URI 被拒绝
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26805093/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Dynamic Directive loading using AngularJS - Error: Access to restricted URI denied
提问by Stuci
I'm currently developing a small educational project using HTML5, CSS, JS and AngularJS.
我目前正在使用 HTML5、CSS、JS 和AngularJS开发一个小型教育项目。
Problem: Loading of a AngularJS Directive in my index.html file
问题：在我的 index.html 文件中加载 AngularJS 指令
Error code [1] - Local browser
错误代码 [1] - 本地浏览器
Error: Access to restricted URI denied
Error: Access to restricted URI denied
Some answers to this question, suggested to deploy the project on a web server. I did it and the error was very interesting:
这个问题的一些答案，建议将项目部署在网络服务器上。我做到了，错误很有趣：
Error code [2] - Webserver
错误代码 [2] - 网络服务器
Failed to load resource: the server responded with a status of 404 (Not Found)
Failed to load resource: the server responded with a status of 404 (Not Found)
File structure
文件结构
app/
---- app.js
---- components/
---------- view1/
-------------- fullView.html
-------------- fullViewApp.js
-------------- partialViews/
------------------ partsOfFullView.html
------------------ morePartsOfFullView.html
assets/
---- libs/
---- css/
---- ...
---- ...
index.html
Code
代码
index.html
索引.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
应用程序.js
angular.module('MyApp', ['MyApp.View1App'])
.controller('MyAppTranslationCtrl', function($scope) {
console.log('-> MyApp Translation example');
});
fullView.html
全视图.html
<div ng-app="MyApp.View1App" ng-controller="...">
<div ng-controller="...">
<!-- content, other directives, etc... -->
...
...
</div>
</div>
fullViewApp.js
fullViewApp.js
angular.module('MyApp.View1App', [])
.directive('qwe', function() {
return {
restrict: 'E',
templateUrl: 'fullView.html'
}
});
Sorry for the long post, but I tried to make it clear, understandable and easier to find the problem.
很抱歉这篇长文章，但我试图使其清晰，易于理解并且更容易找到问题。
After all I am stuck on this error and I can't get it fixed.
毕竟我被这个错误困住了，我无法修复它。
I have triedto move allthe filesin one folderand it magically works! But when I separate themin different folders= ERROR. I can't get it up and running!
我曾试图移动所有的文件在一个文件夹中，它神奇的作品！但是当我将它们分开在不同的文件夹中时= ERROR。我无法启动并运行它！
Please assist me :)
请帮助我:)
########################### ANSWER回答After changing the relative paths to have a full qualifier before them, as suggested in the next post, everything was fine!
在更改相对路径以在它们之前有一个完整的限定符之后，如下一篇文章中所建议的，一切都很好！
Thank you!
谢谢！
回答by Joe
Assuming this is throwing the error:
假设这是抛出错误：
angular.module('MyApp.View1App', [])
.directive('qwe', function() {
return {
restrict: 'E',
templateUrl: 'fullView.html'
}
});
You need to use the full path.
您需要使用完整路径。
angular.module('MyApp.View1App', [])
.directive('qwe', function() {
return {
restrict: 'E',
templateUrl: 'app/components/view1/fullView.html'
}
});
