ng-include 不适用于 Chrome答案

【问题标题】：ng-include not working for Chromeng-include 不适用于 Chrome
【发布时间】：2016-11-13 18:32:22
【问题描述】：

我创建了一个 test.html 文件来尝试调试这个问题。

test.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（资产/模板内部）

<div class="jumbotron">
  <img id="logo" src="assets/img/logo.png" />
  <br />
  <h1>{{ siteHeader }}</h1>
</div>

当我在 Chrome 中打开 index.html 时，第一个 {{ siteHeader }} 将加载网站的标题。 header.html 的任何内容（siteHeader 和徽标 PNG）都不会在其下方加载。当我在 Firefox 或 Safari 中打开相同的 index.html 文件时，header.html 内容确实出现在第一个 {{ siteHeader }} 下方。

我做错了什么/错过了什么？

【问题讨论】：

在您的问题中附加 js 脚本，以便更好地分析
您包含的唯一 js 文件是 MainController.js。是否包含 MyApp 的定义？你能发布控制器吗？

标签： javascript angularjs

【解决方案1】：

我假设您从本地硬盘驱动器运行该文件。 (file://)。 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

更多信息：