动态指令加载使用AngularJS - 错误：访问受限制的URI被拒绝 [英] Dynamic Directive loading using AngularJS - Error: Access to restricted URI denied
问题描述
我目前正在开发一个使用HTML5，CSS，JS和 AngularJS 的小型教育项目。
$ b 问题：一个AngularJS指令在我的index.html文件中
错误代码[1] - 本地浏览器
错误：访问受限制的URI被拒绝
这个问题的一些答案，建议在web上部署项目服务器。我做到了，错误是非常有趣的：
错误代码[2] - Web服务器
无法加载资源：服务器响应状态为404（未找到）
$ b
app /
---- app.js $文件结构 b $ b ----组件/
---------- view1 /
-------------- fullView.html
-------------- fullViewApp.js
-------------- partialViews /
--------- --------- partsOfFullView.html
------------------ morePartsOfFullView.html
assets /
--- - libs /
---- css /
---- ...
---- ...
index.html
$ p 代码 index.html
<！DOCTYPE html>
< html ng-app =MyApp>
< head>
< meta charset =utf-8>
< title>我的范例< / title>
<！ - CSS - >
< link href =./ assets / css / bootstrap.min.css =stylesheet>
< link href =./ assets / css / bootstrap-datetimepicker.min.css =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的模块 - >
< script type =text / javascriptsrc =./app/app.js>< / script>
< script type =text / javascriptsrc =./ app / components / view1 / fullViewApp.js>< / script>
< / head>
< body ng-controller =MyAppTranslationCtrl>
<！ - 我的自定义指令 - >
< qwe>< / qwe>
< / body>
< / html>
app.js
pre $
angular.module（'MyApp'，['MyApp.View1App']）
.controller（'MyAppTranslationCtrl'，function（$ scope）{
console.log（' - > MyApp翻译示例'）;
}）;
fullView.html
< div ng-app =MyApp.View1Appng-controller =...>
< div ng-controller =...>
<！ - 内容，其他指令等... - >
...
...
< / div>
< / div>
fullViewApp.js
angular.module（'MyApp.View1App'，[]）
.directive（'qwe'，function（）{
return {
限制：'E'，
templateUrl：'fullView.html'
}
}）;
很抱歉，我试图说清楚，可以理解和容易地发现问题。
毕竟我被困在这个错误，我不能得到它的修正。
我有尝试移动所有 文件在一个文件夹中，它很神奇地有效！但当将其分隔存储在其他文件夹 = 错误中时。
＃b
$ b＃ ########################### ANSWER
更改相对路径有一个完整的限定符在他们之前，下一篇文章中建议，一切都很好！
谢谢！ 解决方案
假设这是抛出错误：
angular.module（'MyApp.View1App'，[]）
.directive（'qwe'，function ）{
return {
restrict：'E'，
templateUrl：'fullView.html'
}
}）;
您需要使用完整路径。
< pre $ angular.module（'MyApp.View1App'，[]）
.directive（'qwe'，function（）{
return {
restrict ：'E'，
templateUrl：'app / components / view1 / fullView.html'
}
}）;
I'm currently developing a small educational project using HTML5, CSS, JS and AngularJS.
Problem: Loading of a AngularJS Directive in my index.html file
Error code [1] - Local browser
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
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
<!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'
}
});
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 tried to move all the files in one folder and it magically works! But when I separate them in different folders = ERROR. I can't get it up and running!
Please assist me :)
############################ ANSWERAfter changing the relative paths to have a full qualifier before them, as suggested in the next post, everything was fine!
Thank you!
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'
}
});
这篇关于动态指令加载使用AngularJS - 错误：访问受限制的URI被拒绝的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
