我目前是一名初学者 - 正在学习 angularJS。
我在使用 ng-include
我有 2 个 html 源文件。两个文件位于同一目录中
- index.html
- header.html
index.html:
<!DOCTYPE html>
<html lang="en" ng-app="myNinjaApp">
<head>
<title>NG!</title>
<link href="content/css/styles.css" rel="stylesheet" type="text/css" />
<script src="app/lib/angular.js"></script>
<script src="app/app.js"></script>
</head>
<body>
<ng-include src="'header.html'"></ng-include>
<div ng-controller="NinjaController">
<p>{{message}}</p>
<input type="text" ng-model="search" />
<input type="text" ng-model="rateFilter" />
<ul>
<li ng-repeat="ninja in ninjas | orderBy: '-name' | filter: search">{{ninja.name}} - {{ninja.rate | currency}}</li>
</ul>
</div>
</body>
<html>
标题.html
<div>
<h1>Ninja Directory</h1>
<ul>
<li><a href="">Home</a></li>
<li><a href="">List Ninjas</a></li>
</ul>
</div>
当我在浏览器中查看index.html 时，header.html 页面的内容丢失了。我在这里缺少什么？
最佳答案
我认为你的问题的根本原因是从文件系统运行你的index.html。 如果你查看控制台会看到一个错误:
angular.js:13562 Access to XMLHttpRequest at 'file:///header.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
要解决此问题，请尝试在某些本地服务器(apache、nginx、node.js 等)上运行您的页面
关于javascript - ng-include 不加载指定文件的内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57282558/