在 AngularJS 中，我们经常需要动态加载不同的模板来渲染不同的页面。这时，ng-include 就是一个非常有用的指令。本文将详细介绍如何使用 ng-include 来动态加载不同的模板，并提供示例代码以供学习和参考。
ng-include 指令简介
ng-include 是 AngularJS 中的一个指令，用于动态加载指定的模板。它的语法很简单：
----------- --------------------------------------
其中，src 属性指定了要加载的模板的路径。注意，路径需要用单引号括起来。另外，ng-include 还支持一些可选的属性，例如 onload 和 autoscroll，用于在模板加载完成后执行一些操作。
动态加载不同的模板
有时候，我们需要根据不同的条件来加载不同的模板。这时，我们可以使用 ng-include 的动态绑定功能。具体来说，我们可以把 src 属性的值绑定到一个变量，然后根据变量的值动态加载不同的模板。
下面是一个示例代码：
---- ----------------------------- ------- ------------------- ------------------ --- - -- ----------- --------- ----------- -------------------------------- ------
在这个示例中，我们定义了一个控制器 MyController，它有一个变量 templates，用于存储不同的模板信息。每个模板都有一个 name 和一个 url 属性，分别表示模板的名称和路径。我们还定义了一个 select 元素，用于让用户选择要加载的模板。ng-model 属性绑定了一个变量 template，表示当前选择的模板。ng-options 属性则定义了如何显示模板列表。
最后，我们使用 ng-include 指令来动态加载模板。src 属性绑定了 template.url 变量，表示要加载的模板路径。这样，用户选择不同的模板时，ng-include 就会自动加载对应的模板。
总结
ng-include 是 AngularJS 中一个非常有用的指令，可以帮助我们动态加载不同的模板。本文介绍了 ng-include 的基本使用方法，以及如何使用动态绑定来加载不同的模板。希望本文能够帮助读者更好地理解 ng-include 的使用方法，从而更加灵活地开发 AngularJS 应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f3eebe2b3ccec22fc5a868