为什么即使我提供了正确的url也无法获取我的Angular指令 - 得到$ compile错误而XMLHttpRequest无法加载错误?
我从一个角度应用程序开始,我不能包含指令,因为我不断收到2个不同的错误。
XMLHttpRequest无法加载/交叉源请求仅支持协议方案:http,data,chrome,chrome-extension,https,chrome-extension-resource。
错误:$ compile:upload
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>
答案 0 :(得分:0)
始终使用服务器运行角度应用程序,否则可能会出现跨源错误。服务器将帮助您恢复文件路径。然后编辑您的指令
'use strict';
app.directive('navbar', function () {
return {
restrict: 'E',
templateUrl: 'navbar.html'
}
});
我做了一点plunker因此我们确保您的代码没有错误。
我不确定使用绝对路径但是如果你打算使用它,那么你必须输入类似的东西:&#34; C:projects / project1 / js / navbar / navbar.js&#34; 你可以使用http-server,它易于安装和使用。 我希望能回答你的问题