在 AngularJS 中，ng-include 指令可以用来在 HTML 页面中引入其他 HTML 文件或者模板。这个指令非常有用，因为它可以让我们对 HTML 页面进行模块化的设计，从而提高代码的可维护性和复用性。
ng-include 的基本用法
ng-include 指令的基本用法非常简单。我们只需要在 HTML 页面中使用 ng-include 指令，并且设置它的 src 属性为要引入的 HTML 文件或者模板的路径即可。例如：
<div ng-include="'views/header.html'"></div>
在上面的例子中，我们使用 ng-include 指令来引入一个名为 header.html 的 HTML 文件。注意，我们在 src 属性的值前后都加了单引号，这是因为 ng-include 指令的 src 属性必须是一个 AngularJS 表达式。
ng-include 的高级用法
除了基本用法之外，ng-include 指令还有一些高级的用法，可以让我们更加灵活地使用它。
动态设置 ng-include 的 src 属性
有时候我们需要根据一些条件来动态地设置 ng-include 的 src 属性。这时候我们可以使用 ng-include 的 ng-src 属性来实现。例如：
<div ng-include ng-src="{{headerUrl}}"></div>在上面的例子中，我们使用 ng-src 属性来动态地设置 ng-include 的 src 属性，headerUrl 是一个 AngularJS 表达式，它的值根据具体的情况而定。
在 ng-include 中使用 ng-controller
ng-include 指令默认会使用父作用域中的控制器，但是有时候我们需要在 ng-include 中使用自己的控制器。这时候我们可以使用 ng-controller 属性来实现。例如：
<div ng-include="'views/header.html'" ng-controller="HeaderController"></div>
在上面的例子中，我们在 ng-include 中使用了一个名为 HeaderController 的控制器，它是在 header.html 中定义的。
示例代码
下面是一个完整的示例代码，它演示了如何使用 ng-include 指令来引入一个 HTML 文件，并且在该文件中使用自己的控制器。
HTML 文件 header.html：
<div ng-controller="HeaderController">
<h1>{{title}}</h1>
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>
</div>JavaScript 文件 app.js：
var app = angular.module('myApp', []);
app.controller('HeaderController', ['$scope', function($scope) {
$scope.title = 'My App';
$scope.items = ['Home', 'About', 'Contact'];
}]);HTML 文件 index.html：
<!DOCTYPE html> <html ng-app="myApp"> <head> <title>My App</title> </head> <body> <div ng-include="'views/header.html'" ng-controller="HeaderController"></div> <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script> <script src="app.js"></script> </body> </html>
在上面的示例代码中，我们首先定义了一个名为 HeaderController 的控制器，在该控制器中定义了 $scope.title 和 $scope.items 两个属性。然后我们在 header.html 中使用 ng-controller 属性来指定该控制器，从而实现了在 ng-include 中使用自己的控制器。
最后，在 index.html 中我们使用 ng-include 指令来引入 header.html 文件，并且在该指令中使用 ng-controller 属性来指定 HeaderController 控制器。这样就可以实现在 HTML 文件中使用自己的控制器了。
总结
在本文中，我们介绍了 AngularJS 中 ng-include 指令的使用方法，包括基本用法和高级用法。我们还通过一个示例代码演示了如何在 ng-include 中使用自己的控制器。希望本文对大家学习 AngularJS 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658a38d8eb4cecbf2df69b11