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通过CORS策略已阻止从来源“空”访问“ file：///header.html”处的XMLHttpRequest：协议方案仅支持跨来源请求：http，数据，chrome， chrome-extension，https。

为解决此问题，请尝试在某些本地服务器（apache，nginx，node.js等）上运行页面

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

1 个答案: