Question

我使用AngularJs创建了一个简单的页面。当我试图在index.html中包含header.htm时，浏览器中没有任何内容。

index.html

<html>
  <script 
  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">
  </script>
<body>
  <div ng-app="">
  <div ng-include="'views/header.htm'"></div>
  </div>
</body>
</html>

header.htm

<h1>Header</h1>

Answer 1

欢迎乘坐！请提供一些日志，以便我们更好地了解情况。另请考虑阅读How to Ask。

您可以在...

中显示控制台错误

Chrome 与
Mac OS上的Alt+CMD+J，在Windows上（我猜）Ctrl+Alt+J
Firefox Mac OS上的Alt+CMD+K，在Windows上（我猜）Ctrl+Alt+K

现在回答我们：您请求views/header.htm，因此您的文件结构必须如下所示：

- index.html
- views
  - header.htm

要在本地测试您的网站，请使用http-server之类的工具。或者当您使用基于Mac或Unix的计算机时，只需在项目目录中运行python -m SimpleHTTPServer即可。

希望有所帮助。

Answer 2

您尚未在header.html的定义中显示您的文件夹结构和更多内容。从下次尝试创建MCVE。

我创建了一个fiddle来展示它的工作原理。

<div ng-controller="Ctrl">
    <div ng-include ="'header.html'" onload='myFunction()'></div>
 </div>

<!-- header.html -->
<script type="text/ng-template" id="header.html">
  Content of Header html
</script>

function Ctrl($scope) {
    $scope.myFunction = function() {
        alert('header loaded');
    }
}

ng-include无效

2 个答案: