AngularJS | ng-include指令

简介

ng-include是AngularJS中的一个指令，用于将外部HTML文件的内容嵌入到当前HTML文件中。

使用方法

<div ng-include="'path/to/external/file.html'"></div>

需要注意的是，传入ng-include指令的参数应该是一个AngularJS表达式。上面的例子中，参数为一个字符串，需要用单引号或双引号括起来。

变量绑定

在不同的控制器中使用ng-include指令可能导致变量名称重复，为了避免这种情况，可以使用ng-include指令的ngInclude属性。这个属性允许我们使用一个对象来定义需要传入子模板的属性和值。

<div ng-include="'path/to/external/file.html'"
     ng-init="{var1: 'value1', var2: 'value2'}">
</div>

这里ng-init指令可以用来初始化ngInclude属性中定义的变量。

在被包含的HTML文件中，我们可以使用$scope中定义的变量。

<!-- 被包含的HTML文件 -->
<div>{{var1}}</div>
<div>{{var2}}</div>

异步加载

当使用ng-include指令时，AngularJS将会自动进行异步加载。我们可以利用这个特性在加载完成时执行额外的操作。

<div ng-include="'path/to/external/file.html'"
     onload="alert('加载完成');"></div>

这里的onload指令指定了一个函数，当外部文件成功加载后将会执行这个函数。

总结

ng-include指令是AngularJS中一个非常有用的指令，它能够将外部文件的内容嵌入到当前的HTML中。我们可以使用它来实现模板的复用，也可以使用它来实现异步加载并进行相关操作。