Question

我创建了一个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 }}下面。

我做错了什么/失踪了？

Answer 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

ng-include不适用于Chrome

2 个答案:

更多信息：