AngularJS directive返回对象属性详解

AngularJS指令（Directives）详解——Directive返回对象属性的

AngularJS，作为一个强大的前端框架，提供了许多功能丰富的特性，其中指令（Directives）是其核心特性之一。本文将重点介绍AngularJS指令中返回对象属性的相关内容。

在AngularJS中，`.directive()` 方法用于定义新的指令。该方法接收两个参数：指令的名字和定义指令行为的工厂函数。这个工厂函数返回一个对象，该对象包含了指令的各种属性和方法。

一、返回的对象的属性：

1. restrict: 这是一个字符串，用来描述指令在DOM中是如何被声明的。可选值有 'E'（元素）、'A'（属性）、'C'（类名）、'M'（注释），可单独使用也可组合使用。例如，'AE' 表示该指令可以作为HTML元素或者属性来使用。

2. priority: 这是一个数字，用来定义指令的优先级（默认为0）。在DOM编译过程中，优先级高的指令会先执行。ngRepeat是所有内置指令中优先级最高的，为1000。

3. terminal: 这是一个布尔值，与priority属性有一定联系。当设置为true时，它会停止运行当前元素上比本指令优先级低的指令，但相同优先级的指令依旧会执行。

4. template: 这是一个字符串或函数，定义一个模板。该模板可以是静态的HTML代码，也可以是一个返回HTML字符串的函数。这个函数可以接收两个参数：tElement和tAttrs。

5. templateUrl: 当模板内容较多时，可以将其存放在一个单独的文件中，然后通过这个属性来引入。它可以是文件路径的字符串，也可以是一个返回文件路径字符串的函数。这个函数同样可以接收两个参数：tElement和tAttrs。

二、示例说明：

假设我们有以下两个指令：myDirective和myDirective1。myDirective的优先级为1，myDirective1的优先级为3，并且设置了terminal属性为true。在HTML文件中，我们在一个div元素上同时使用这两个指令：

。由于myDirective1的优先级更高并且设置了terminal属性为true，所以会停止myDirective的执行。

同样，如果我们想要自定义一个独立的指令功能，即将该指令定义为元素形式，我们可以将restrict设置为'E'。如果想要扩展已存在的指令功能，则可以将其定义为属性形式。

AngularJS的指令提供了丰富的属性和方法，让我们可以灵活地创建和管理自定义的DOM行为。通过深入了解这些属性和方法，我们可以更好地使用AngularJS来构建复杂的前端应用。AngularJS中的指令与Transclusion功能

在AngularJS的世界里，指令（Directives）是一个核心概念，它们允许开发者扩展HTML的功能和元素的行为。让我们深入一个特定的指令功能：Transclusion。

让我们从简单的开始。在AngularJS中，你可以创建一个名为`myDirective`的自定义指令。这个指令可以包含一个模板，该模板定义了指令如何在DOM中呈现。例如：

```javascript

angular.module('myApp', [])

.directive('myDirective', function() {

return {

restrict: 'A', // 表示这是一个属性指令

template: '

', // 定义指令的模板内容

};

});

```

然后在HTML文件中使用这个指令：``。当`replace`参数为`false`时，HTML源码会呈现为`

`；当为`true`时，源码会变为``。这就是基本的使用方式。但有时候，我们可能想在指令内部保留原有的HTML内容。这时，Transclusion功能就派上了用场。下面是一个具体的例子：

```javascript

angular.module('myApp', [])

.directive('myDirective', function() {

return {

restrict: 'EA', // 表示这是一个属性或元素指令

transclude: true, // 开启Transclusion功能

};

});

```