我目前正在使用 HTML5、CSS、JS 和 AngularJS 开发一个小型教育项目。
问题:在我的 index.html 文件中加载 AngularJS 指令
错误代码 [1] - 本地浏览器
错误:访问受限 URI 被拒绝
这个问题的一些答案，建议将项目部署在web服务器上。我做到了，错误很有趣:
错误代码 [2] - 网络服务器
加载资源失败:服务器响应状态为 404(未找到)
文件结构
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'
}
});
很抱歉发了这么长的帖子，但我试图让它清楚、易于理解并且更容易找到问题。
毕竟我被这个错误困住了，无法修复。
我已经尝试移动所有一个文件夹中的文件并且它神奇地有效!但是当我在不同的文件夹中将它们分开时 = 错误。我无法启动并运行它!
请帮助我:)
############################回答按照下一篇文章中的建议，将相对路径更改为在它们之前有一个完整的限定符后，一切都很好!
谢谢!
最佳答案
假设这是抛出错误:
angular.module('MyApp.View1App', [])
.directive('qwe', function() {
return {
restrict: 'E',
templateUrl: 'fullView.html'
}
});
您需要使用完整路径。
angular.module('MyApp.View1App', [])
.directive('qwe', function() {
return {
restrict: 'E',
templateUrl: 'app/components/view1/fullView.html'
}
});
关于javascript - 使用 AngularJS 加载动态指令 - 错误 : Access to restricted URI denied，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26805093/