AngularJS 指令实践

概述

如果你写过AngularJS的应用，那么你一定已经使用过指令，不管你有没有意识到。你肯定已经用过简单的指令，比如 ng-mode, ng-repeat, ng-show等。这些指令都赋予DOM元素特定的行为。例如，ng-repeat 重复特定的元素，ng-show 有条件地显示一个元素。如果你想让一个元素支持拖拽，你也需要创建一个指令来实现它。

指令基本思想：它通过对元素绑定事件监听或者改变DOM而使HTML拥有真实的交互性。

Link函数和Scope

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

1 <body ng-controller="MainCtrl">

2   <input type="text" ng-model="color" placeholder="Enter a color" />

3   <hello-world/>

4 </body>

helloWorld 指令如下：

 1 app.directive('helloWorld', function() {

 2   return {

 3     restrict: 'AE',

 4     replace: true,

 5     template: '<p style="background-color:{{color}}">Hello World',

 6     link: function(scope, elem, attrs) {

 7       elem.bind('click', function() {

 8         elem.css('background-color', 'white');

 9         scope.$apply(function() {

10           scope.color = "white";

11         });

12       });

13       elem.bind('mouseover', function() {

14         elem.css('cursor', 'pointer');

15       });

16     }

17   };

18 });

scope – 指令的scope。在我们的例子中，指令的scope就是父controller的scope。
elem – 指令的jQLite(jQuery的子集)包装DOM元素。如果你在引入AngularJS之前引入了jQuery，那么这个元素就是jQuery元素，而不是jQLite元素。由于这个元素已经被jQuery/jQLite包装了，所以我们就在进行DOM操作的时候就不需要再使用 $()来进行包装。
attr – 一个包含了指令所在元素的属性的标准化的参数对象。举个例子，你给一个HTML元素添加了一些属性：，那么可以在 link 函数中通过 attrs.someAttribute 来使用它。

click 处理函数用来重置 <p> 的背景色，而 mouseover 处理函数改变鼠标为 pointer。在模板中有一个表达式 {{color}}，当父scope中的 color 发生变化时，它用来改变 Hello World 文字的背景色。在线演示：http://plnkr.co/edit/14q6WxHyhWuVxEIqwww1

link函数:主要用来为DOM元素添加事件监听、监视模型属性变化、以及更新DOM

指令是如何被编译的

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

Demo:https://github.com/jsprodotcom/source/blob/master/AngularJS_Note_Taker-source_code.zip

http://embed.plnkr.co/QvxI4LbqfUY3C3XQjN3m/app.js

原文链接： sitepoint
译文链接： http://blog.jobbole.com/62999/