Question

为什么即使我提供了正确的url也无法获取我的Angular指令 - 得到$ compile错误而XMLHttpRequest无法加载错误？

我从一个角度应用程序开始，我不能包含指令，因为我不断收到2个不同的错误。

XMLHttpRequest无法加载/交叉源请求仅支持协议方案：http，data，chrome，chrome-extension，https，chrome-extension-resource。

我已经研究了一下，有人建议设置服务器以避免我不明白的事情。如果我真的不需要它，为什么我不能只使用angular / html构建app而没有后端。什么可能导致错误？

错误：$ compile：upload

当模板的URL拼写错误时，显然会发生这种情况 - 但是，我提供了从根目录开始的整个路径（templateUrl： 'js / navbar / navbar.html'）或者是错的？谢谢。

PROJECT1 / index.html中：

<!DOCTYPE html>
<html lang="en">

<head>
    <title>page</title>
    <link rel="stylesheet" type="text/css" href="public/css/style.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.min.js">    </script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.2/angular-ui-router.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular-materialize/0.2.1/angular-materialize.min.js"></script>
    <script src="js/app.js"></script>
   <script src="js/navbar/navbar.js"></script>
</head>

<body ng-app="myApp">
    <header></header>

    <navbar></navbar>
    <ui-view></ui-view>
</body>

</html>

PROJECT1 / JS / app.js

'use strict';
var app=angular.module('myApp', ['ui.router', 'ui.materialize']);

PROJECT1 / JS /导航栏/ navbar.js

'use strict';

app.directive('navbar', function () {
    return {
        restrict: 'E',
        templateUrl: 'js/navbar/navbar.html'
    }
});

PROJECT1 / JS /导航栏/ navbar.html

<div class="navbar navbar-static-top navbar-inverse">
    <div class="container">
        <ul class="nav navbar-nav">
            <li>
            Hello
            </li>
        </ul>
    </div>
</div>

Answer 1

始终使用服务器运行角度应用程序，否则可能会出现跨源错误。服务器将帮助您恢复文件路径。然后编辑您的指令

'use strict';
app.directive('navbar', function () {
    return {
        restrict: 'E',
        templateUrl: 'navbar.html'
    }
});

我做了一点plunker因此我们确保您的代码没有错误。

我不确定使用绝对路径但是如果你打算使用它，那么你必须输入类似的东西：＆＃34; C：projects / project1 / js / navbar / navbar.js＆＃34; 你可以使用http-server，它易于安装和使用。我希望能回答你的问题

CORS错误 - 获取$ compile错误并且XMLHttpRequest无法加载错误？

1 个答案: