gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 23:12:32 32 4
gpt4 key购买 nike

我目前是一名初学者 - 正在学习 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>

标题.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/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com