AngularJS 是一个流行的前端 JavaScript 框架，它允许开发人员构建动态的 Web 应用程序。其中一个重要的功能是 directive，它允许开发人员创建自定义 HTML 元素和属性，以及指令的行为。在 directive 中，有三种方式来定义指令的模板：template、templateUrl 和 ng-include。
template
template 是最简单的指令模板定义方式，它允许开发人员直接在指令定义中定义 HTML 模板。例如：
app.directive('myDirective', function() { return { template: '<div>Hello, {{name}}!</div>', scope: { name: '@' } }; });
在这个例子中，我们定义了一个名为 myDirective 的指令，它的模板是一个简单的 div，其中包含一个插值表达式，用来展示 name 属性的值。该指令还定义了一个名为 name 的属性，它通过 @ 符号进行绑定，表示它是一个字符串类型的属性。
templateUrl
templateUrl 允许开发人员将指令的模板定义在一个外部 HTML 文件中。例如：
app.directive('myDirective', function() { return { templateUrl: 'my-directive.html', scope: { name: '@' } }; });
在这个例子中，我们定义了一个名为 myDirective 的指令，它的模板定义在一个名为 my-directive.html 的外部 HTML 文件中。该指令还定义了一个名为 name 的属性，它通过 @ 符号进行绑定，表示它是一个字符串类型的属性。
ng-include
ng-include 允许开发人员将指令的模板定义在一个外部 HTML 文件中，并且可以动态加载模板。例如：
app.directive('myDirective', function() { return { template: '<div ng-include="templateUrl"></div>', scope: { templateUrl: '@' } }; });
在这个例子中，我们定义了一个名为 myDirective 的指令，它的模板是一个简单的 div，其中包含一个 ng-include 指令，用来动态加载 templateUrl 属性中指定的外部 HTML 文件。该指令还定义了一个名为 templateUrl 的属性，它通过 @ 符号进行绑定，表示它是一个字符串类型的属性。
指导意义
在使用 AngularJS 开发 Web 应用程序时，指令是一个非常强大的工具。通过定义自定义 HTML 元素和属性，以及指令的行为，开发人员可以创建高度可定制的 UI 组件和行为。在指令中，template、templateUrl 和 ng-include 是定义指令模板的三种方式，开发人员可以根据实际需求选择适合自己的方式。
示例代码
以下是一个完整的示例代码，演示了如何使用 template、templateUrl 和 ng-include 来定义指令模板：
-- -------------------- ---- ------- --------- ----- ----- --------------- ------ ----- ---------------- ---------------- --------- --------------- ------- ------ ------------- --------------------------- ------- ------------------------------------------------------------------------------------ -------- --- --- - ----------------------- ---- -- -------- ----------------------------- ---------- - ------ - --------- ------------ ----------------- ------ - ----- --- - -- --- -- ----------- ----------------------------- ---------- - ------ - ------------ --------------------- ------ - ----- --- - -- --- -- ---------- ----------------------------- ---------- - ------ - --------- ----- --------------------------------- ------ - ------------ --- - -- --- --------- ------- -------展开代码
其中，my-directive1 的模板定义在指令定义中，my-directive2 的模板定义在一个名为 my-directive2.html 的外部 HTML 文件中，my-directive3 的模板也定义在一个外部 HTML 文件中，并且可以动态加载。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67cae4b7e46428fe9e37d2bb
