使用AngularJS加载动态指令-错误:访问受限URI被拒绝

Dynamic Directive loading using AngularJS - Error: Access to restricted URI denied

本文关键字：访问 URI 拒绝 错误 加载 AngularJS 动态 指令 使用      更新时间：2023-09-26

我目前正在使用HTML5、CSS、JS和AngularJS开发一个小型教育项目。

问题：在我的index.html文件中加载AngularJS指令

错误代码[1]-本地浏览器

Error: Access to restricted URI denied

这个问题的一些答案，建议将项目部署在web服务器上。我做到了，错误非常有趣：

错误代码[2]-Web服务器

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

文件结构

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'
        }
    });
相关文章：