我创建了一个 test.html 文件来尝试调试这个问题。
测试.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script src="app/controllers/MainController.js"></script>
</head>
<body ng-app="MyApp" ng-controller="MyController">
<h1>{{ siteHeader }}</h1>
<div ng-include="'assets/templates/header.html'"></div>
</body>
</html>
header.html( Assets /模板内部)
<div class="jumbotron">
<img id="logo" src="assets/img/logo.png" />
<br />
<h1>{{ siteHeader }}</h1>
</div>
当我在 Chrome 中打开 index.html 时，第一个 {{ siteHeader }} 将加载网站的标题。 header.html 的任何内容(包括 siteHeader 和 Logo PNG)都不会在其下方加载。当我在 Firefox 或 Safari 中打开相同的 index.html 文件时，header.html 内容确实出现在第一个 {{ siteHeader }} 的下方。
我做错了什么/遗漏了什么？
最佳答案
我假设您从本地硬盘运行该文件。 (文件://)。 Chrome 阻止脚本从 file 来源读取文件。这就是 Angular 无法成功读取模板文件并将其包含到页面的原因。
您有 2 个解决方案:简单的一个是在 allow file access 模式下运行 chrome。这可以帮助您:How to launch html using Chrome at "--allow-file-access-from-files" mode?
另一种解决方案是创建一个简单的 http 本地服务器，并从该服务器运行站点。您可以使用 php、nodejs、ruby、python 或其他任何工具运行此服务器。这可以帮助您:Run Local Server
更多信息:
关于javascript - ng-include 不适用于 Chrome，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38313242/