ng-include 不加载指定文件的内容

Question

我目前是初学者 - 正在学习 angularJS。我在使用 ng-include

将 html 的一部分加载到我的主页时遇到了一些困难

我有 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>

header.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 页面的内容丢失了。我在这里错过了什么？

Answer 1

我认为您的问题的根本原因是运行从文件系统中 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 等）上

ng-include 不加载指定文件的内容

ng-include not loading contents of specified file

html

javascript

angularjs

angularjs-ng-include