AngularJ中的Directive指令

比眉伴天荒 2022-07-13 03:26 190阅读 0赞

Directive（指令）是AngularJ非常强大而有有用的功能之一。它就相当于为我们写了公共的自定义DOM元素或CLASS属性或ATTR属性，并且它不只是单单如此，你还可以在它的基础上来操作scope、绑定事件、更改样式等。通过这个Directive，我们可以封装很多公共指令，比如分页指令、自动补全指令等等。然后在HTML页面里只需要简单的写一行代码就可以实现很多强大的功能。一般情况下，需要用Directive有下面的情景：

1. 使你的Html更具语义化，不需要深入研究代码和逻辑即可知道页面的大致逻辑。  
2. 抽象一个自定义组件，在其他地方进行重用

**一、Directive的定义及其使用方法**  
AngularJs的Directive指令定义大致如下：

angular.module("app",\[\]).directive("directiveName",function()\{

return\{

//通过设置项来定义

\};

\})

其中return返回的对象包含很多参数，下面一一说明

![Center][]

## **2、创建自定义指令：** ##

一个Angular指令可以有以下的四种表现形式： 1. 一个新的HTML元素（<data-picker></data-picker>） 2. 元素的属性（<input type=”text” data-picker/>） 3. CSS class（<input type=”text” class=”data-picker”/>） 4. 注释（<!–directive:data-picker –>） 当然，我们可以控制我们的指令在HTML中的表现形式。下面我们来看一下AngularJS中的一个典型的指令的写法。指令注册的方式与 controller 一样，但是它返回的是一个拥有指令配置属性的简单对象(指令定义对象) 。下面的代码是一个简单的 Hello World 指令。

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td style="background:rgb(238,238,238)"> 1 2 3 4 5 6 7 8 9 </td> 
 <td> var app = angular.module('myapp', []); &nbsp; app.directive('helloWorld', function() { &nbsp;&nbsp;return { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;restrict: 'AE', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;replace: 'true', &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;template: '&lt;h3&gt;Hello World!!&lt;/h3&gt;' &nbsp;&nbsp;}; }); </td> 
 </tr> 
 </tbody> 
</table>

在上面的代码中，app.directive()方法在模块中注册了一个新的指令。这个方法的第一个参数是这个指令的名字。第二个参数是一个返回指令定义对象的函数。如果你的指令依赖于其他的对象或者服务，比如 $rootScope, $http, 或者$compile，他们可以在这个时间被注入。这个指令在HTML中以一个元素使用，如下：

XHTML

<table> 
 <tbody> 
 <tr> 
 <td style="background:rgb(238,238,238)"> 1 2 3 </td> 
 <td> &lt;hello-world/&gt; //OR &lt;hello:world/&gt; </td> 
 </tr> 
 </tbody> 
</table>

或者，以一个属性的方式使用：

XHTML

<table> 
 <tbody> 
 <tr> 
 <td style="background:rgb(238,238,238)"> 1 2 3 </td> 
 <td> &lt;div hello-world&gt;&lt;/div&gt; //OR &lt;div hello:world/&gt; </td> 
 </tr> 
 </tbody> 
</table>

如果你想要符合HTML5的规范，你可以在元素前面添加 x- 或者 data-的前缀。所以下面的标记也会匹配 helloWorld 指令：

<table> 
 <tbody> 
 <tr> 
 <td style="background:rgb(238,238,238)"> 1 2 3 </td> 
 <td> &lt;div data-hello-world&gt;&lt;/div&gt; //OR &lt;div x-hello-world&gt;&lt;/div&gt; </td> 
 </tr> 
 </tbody> 
</table>

注意： 在匹配指令的时候，Angular会在元素或者属性的名字中剔除 x- 或者 data- 前缀。 然后将 – 或者 : 连接的字符串转换成驼峰(camelCase)表现形式，然后再与注册过的指令进行匹配。这是为什么，我们在HTML中以 hello-world 的方式使用 helloWorld 指令。其实，这跟HTML对标签和属性不区分大小写有关。 尽管上面的指令仅仅实现了静态文字的显示，但是这里还是有一些有趣的点值得我们去挖掘。我们在指令定义过程中使用了三个属性来配置指令。我们来一一介绍他们的作用。

restrict – 这个属性用来指定指令在HTML中如何使用（还记得之前说的，指令的四种表示方式吗）。在上面的例子中，我们使用了 ‘AE’。所以这个指令可以被当作新的HTML元素或者属性来使用。（字符串）可选参数，指明指令在DOM里面以什么形式被声明；

取值有：E(元素),A(属性),C(类),M(注释)，其中默认值为A；

E(元素)：<directiveName></directiveName> 
A(属性)：<div directiveName='expression'></div> 
C(类)：   <div class='directiveName'></div> 
M(注释)：<--directive:directiveName expression-->

template – 这个属性规定了指令被Angular编译和链接（link）后生成的HTML标记。这个属性值不一定要是简单的字符串。template 可以非常复杂，而且经常包含其他的指令，以及表达式(\{ \{ \}\})等。更多的情况下你可能会见到 templateUrl， 而不是 template。所以，理想情况下，你应该将模板放到一个特定的HTML文件中，然后将 templateUrl 属性指向它。

replace – 这个属性指明生成的HTML内容是否会替换掉定义此指令的HTML元素。在我们的例子中，我们用 <hello-world></hello-world>的方式使用我们的指令，并且将 replace 设置成 true。所以，在指令被编译之后，生成的模板内容替换掉了 <hello-world></hello-world>。最终的输出是 <h3>Hello World!!</h3>。如果你将 replace 设置成 false，也就是默认值，那么生成的模板会被插入到定义指令的元素中。

打开这个 [plunker][]，在”Hello World!!”右键检查元素内容，来更形象地明白这些。

Link函数和Scope

指令生成出的模板其实没有太多意义，除非它在特定的scope下编译。默认情况下，指令并不会创建新的子scope。更多的，它使用父scope。也就是说，如果指令存在于一个controller下，它就会使用这个controller的scope。 如何运用scope，我们要用到一个叫做 link 的函数。它由指令定义对象中的link属性配置。让我们来改变一下我们的 helloWorld 指令，当用户在一个输入框中输入一种颜色的名称时，Hello World 文字的背景色自动发生变化。同时，当用户在 Hello World 文字上点击时，背景色变回白色。 相应的HTML标记如下：

XHTML

<table> 
 <tbody> 
 <tr> 
 <td style="background:rgb(238,238,238)"> 1 2 3 4 </td> 
 <td> &lt;body ng-controller="MainCtrl"&gt; &nbsp;&nbsp;&lt;input type="text" ng-model="color" placeholder="Enter a color" /&gt; &nbsp;&nbsp;&lt;hello-world/&gt; &lt;/body&gt; </td> 
 </tr> 
 </tbody> 
</table>

修改后的 helloWorld 指令如下：

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td style="background:rgb(238,238,238)"> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 </td> 
 <td> app.directive('helloWorld', function() { &nbsp;&nbsp;return { &nbsp;&nbsp;&nbsp;&nbsp;restrict: 'AE', &nbsp;&nbsp;&nbsp;&nbsp;replace: true, &nbsp;&nbsp;&nbsp;&nbsp;template: '&lt;p style="background-color:{ {color}}"&gt;Hello World', &nbsp;&nbsp;&nbsp;&nbsp;link: function(scope, elem, attrs) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elem.bind('click', function() { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elem.css('background-color', 'white'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scope.$apply(function() { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;scope.color = "white"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elem.bind('mouseover', function() { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;elem.css('cursor', 'pointer'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}); &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;}; }); </td> 
 </tr> 
 </tbody> 
</table>

我们注意到指令定义中的 link 函数。 它有三个参数：

scope – 指令的scope。在我们的例子中，指令的scope就是父controller的scope。

elem – 指令的jQLite(jQuery的子集)包装DOM元素。如果你在引入AngularJS之前引入了jQuery，那么这个元素就是jQuery元素，而不是jQLite元素。由于这个元素已经被jQuery/jQLite包装了，所以我们就在进行DOM操作的时候就不需要再使用 $()来进行包装。

attr – 一个包含了指令所在元素的属性的标准化的参数对象。举个例子，你给一个HTML元素添加了一些属性：，那么可以在 link 函数中通过 attrs.someAttribute 来使用它。

link函数主要用来为DOM元素添加事件监听、监视模型属性变化、以及更新DOM。在上面的指令代码片段中，我们添加了两个事件， click，和 mouseover。click 处理函数用来重置 的背景色，而 mouseover 处理函数改变鼠标为 pointer。在模板中有一个表达式 \{ \{color\}\}，当父scope中的 color 发生变化时，它用来改变 Hello World 文字的背景色。 这个 [plunker][plunker 1] 演示了这些概念。

compile函数

compile 函数在 link 函数被执行之前用来做一些DOM改造。它接收下面的参数：

tElement – 指令所在的元素

attrs – 元素上赋予的参数的标准化列表

要注意的是 compile 函数不能访问 scope，并且必须返回一个 link 函数。但是如果没有设置 compile 函数，你可以正常地配置 link 函数，（有了compile，就不能用link，link函数由compile返回）。compile函数可以写成如下的形式：

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td style="background:rgb(238,238,238)"> 1 2 3 4 5 6 7 8 9 10 </td> 
 <td> app.directive('test', function() { &nbsp;&nbsp;return { &nbsp;&nbsp;&nbsp;&nbsp;compile: function(tElem,attrs) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//do optional DOM transformation here &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return function(scope,elem,attrs) { &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//linking function here &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;}; }); </td> 
 </tr> 
 </tbody> 
</table>

大多数的情况下，你只需要使用 link 函数。这是因为大部分的指令只需要考虑注册事件监听、监视模型、以及更新DOM等，这些都可以在 link 函数中完成。 但是对于像 ng-repeat 之类的指令，需要克隆和重复 DOM 元素多次，在 link 函数执行之前由 compile 函数来完成。这就带来了一个问题，为什么我们需要两个分开的函数来完成生成过程，为什么不能只使用一个？要回答好这个问题，我们需要理解指令在Angular中是如何被编译的！

指令是如何被编译的

当应用引导启动的时候，Angular开始使用 $compile 服务遍历DOM元素。这个服务基于注册过的指令在标记文本中搜索指令。一旦所有的指令都被识别后，Angular执行他们的 compile 方法。如前面所讲的，compile 方法返回一个 link 函数，被添加到稍后执行的 link 函数列表中。这被称为编译阶段。如果一个指令需要被克隆很多次（比如 ng-repeat），compile函数只在编译阶段被执行一次，复制这些模板，但是link 函数会针对每个被复制的实例被执行。所以分开处理，让我们在性能上有一定的提高。这也说明了为什么在 compile 函数中不能访问到scope对象。 在编译阶段之后，就开始了链接（linking）阶段。在这个阶段，所有收集的 link 函数将被一一执行。指令创造出来的模板会在正确的scope下被解析和处理，然后返回具有事件响应的真实的DOM节点。

改变指令的Scope

默认情况下，指令获取它父节点的controller的scope。但这并不适用于所有情况。如果将父controller的scope暴露给指令，那么他们可以随意地修改 scope 的属性。在某些情况下，你的指令希望能够添加一些仅限内部使用的属性和方法。如果我们在父的scope中添加，会污染父scope。 其实我们还有两种选择：

一个子scope – 这个scope原型继承子父scope。

一个隔离的scope – 一个孤立存在不继承自父scope的scope。

这样的scope可以通过指令定义对象中 scope 属性来配置。下面的代码片段是一个例子：

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td style="background:rgb(238,238,238)"> 1 2 3 4 5 6 7 8 </td> 
 <td> app.directive('helloWorld', function() { &nbsp;&nbsp;return { &nbsp;&nbsp;&nbsp;&nbsp;scope: true,&nbsp;&nbsp;// use a child scope that inherits from parent &nbsp;&nbsp;&nbsp;&nbsp;restrict: 'AE', &nbsp;&nbsp;&nbsp;&nbsp;replace: 'true', &nbsp;&nbsp;&nbsp;&nbsp;template: '&lt;h3&gt;Hello World!!&lt;/h3&gt;' &nbsp;&nbsp;}; }); </td> 
 </tr> 
 </tbody> 
</table>

上面的代码，让Angular给指令创建一个继承自父socpe的新的子scope。 另外一个选择，隔离的scope：

JavaScript

<table> 
 <tbody> 
 <tr> 
 <td style="background:rgb(238,238,238)"> 1 2 3 4 5 6 7 8 </td> 
 <td> app.directive('helloWorld', function() { &nbsp;&nbsp;return { &nbsp;&nbsp;&nbsp;&nbsp;scope: {},&nbsp; // use a new isolated scope &nbsp;&nbsp;&nbsp;&nbsp;restrict: 'AE', &nbsp;&nbsp;&nbsp;&nbsp;replace: 'true', &nbsp;&nbsp;&nbsp;&nbsp;template: '&lt;h3&gt;Hello World!!&lt;/h3&gt;' &nbsp;&nbsp;}; }); </td> 
 </tr> 
 </tbody> 
</table>

这个指令使用了一个隔离的scope。隔离的scope在我们想要创建可重用的指令的时候是非常有好处的。通过使用隔离的scope，我们能够保证我们的指令是自包含的，可以被很容易的插入到HTML应用中。 它内部不能访问父的scope，所保证了父scope不被污染。 在我们的 helloWorld 指令例子中，如果我们将 scope 设置成 \{\}，那么上面的代码将不会工作。 它会创建一个新的隔离的scope，那么相应的表达式 \{ \{color\}\} 会指向到这个新的scope中，它的值将是 undefined. 使用隔离的scope并不意味着我们完全不能访问父scope的属性。其实有一些技术可以允许我们访问父scope的属性，甚至监视他们的变化。

[Center]: /images/20220713/76f20968400f48cbaf35e1ab46136d07.png
[plunker]: http://plnkr.co/edit/GKI339z2VDdZTOE2bGFP
[plunker 1]: http://plnkr.co/edit/14q6WxHyhWuVxEIqwww1