一、概述
- 在原生 HTML 中，目前还不支持直接包含（引入）其他 HTML 文件
- AngularJS 提供了
ng-include 指令，用于在页面中包含外部 HTML 内容 - 被包含的文件中不仅可以有普通 HTML，还可以包含 AngularJS 代码（如指令、表达式等）
二、基本用法
包含纯 HTML 文件
<body ng-app="">
<div ng-include="'welcome.html'"></div>
</body>Code language: HTML, XML (xml)welcome.html 内容
<h1>FoxDevelop</h1>Code language: HTML, XML (xml)
ng-include的值是一个字符串，所以文件名需要用引号包裹（如'welcome.html'）。
三、包含带有 AngularJS 代码的文件
被包含的文件中如果包含 AngularJS 指令或表达式，只要它所在的父元素处于 AngularJS 应用的作用域内，就会被正常编译和执行。
被包含的 welcome.html
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Url }}</td>
</tr>
</table>Code language: HTML, XML (xml)主页面
<body>
<div ng-app="myApp" ng-controller="sitesCtrl">
<div ng-include="'welcome.html'"></div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('sitesCtrl', function ($scope) {
$scope.names = [
{ 'Name': 'FoxDevelop', 'Url': 'foxdevelop.com' },
{ 'Name': 'Google', 'Url': 'google.com' }
];
});
</script>
</body>Code language: HTML, XML (xml)说明
welcome.html中的ng-repeat和{{ x.Name }}等 AngularJS 代码会被正常执行- 被包含的模板共享父作用域（即
sitesCtrl的$scope），所以可以直接使用$scope.names中的数据
四、注意事项
| 要点 | 说明 |
|---|---|
| 路径是字符串 | ng-include="'welcome.html'" 值必须带引号 |
| 作用域 | 被包含的模板继承父作用域的数据和方法 |
| 跨域限制 | 如果文件在不同域名下，可能受浏览器同源策略限制 |
| 依赖服务器 | 需要运行在 Web 服务器上（如 localhost），直接打开文件可能报错 |
Previous: AngularJS 输入验证
Next: AngularJS 路由（Routing）