AngularJS 中的指令實踐開發指南(一)_AngularJS
- WBOY原創
- 2016-05-16 15:09:541502瀏覽
指令（Directives）是所有AngularJS應用最重要的部分。儘管AngularJS已經提供了非常豐富的指令，但還是經常需要創建應用特定的指令。這篇教學會為你講述如何自訂指令，以及介紹如何在實際專案中使用。在這篇文章的最後（第二部分），我會指導你如何使用Angular指令來創建一個簡單的記事本應用程式。
概述
一個指令用來引進新的HTML語法。指令是DOM元素上的標記，使元素擁有特定的行為。舉例來說，靜態的HTML不知道如何來創建和展現一個日期選擇器控制項。讓HTML能辨識這個語法，我們需要使用指令。指令透過某種方法來創建一個能夠支援日期選擇的元素。我們會循序漸進地介紹這是如何達成的。 如果你寫過AngularJS的應用，那麼你一定已經使用過指令，不管你有沒有意識到。你一定已經用過簡單的指令，像是 ng-mode, ng-repeat, ng-show等。這些指令都賦予DOM元素特定的行為。例如，ng-repeat 重複特定的元素，ng-show 有條件地顯示一個元素。如果你想讓一個元素支援拖曳，你也需要建立一個指令來實現它。指令背後基本的想法很簡單。它透過對元素綁定事件監聽或改變DOM而使HTML擁有真實的互動性。
jQuery視角
想像一下使用jQuery如何建立一個日期選擇器。首先，我們在HTML中加入一個普通的輸入框，然後透過jQuery呼叫 $(element).dataPicker() 來將它轉變成一個日期選擇器。但是，仔細想一下。當一個設計人員過來檢查HTML標記的時候，他/她能否立刻猜到這個字段實際上表示的內容？這只是一個簡單的輸入框，或是日期選擇器？你需要查看jQuery程式碼來確定這些。而Angular的方法是使用一個指令來擴充HTML。所以，一個日期選擇器的指令可以是下面的形式：
<input type="text" />
或者是這樣：
<input type="text" />
這種創造UI組成的方式更加直接和清晰。你可以輕易地透過查看元素就明白這到底是什麼。
建立自訂指令：
一個Angular指令可以有以下的四種表現形式： 1. 一個新的HTML元素（
var app = angular.module('myapp', []);
app.directive('helloWorld', function() {
return {
restrict: 'AE',
replace: 'true',
template: '<h3>Hello World!!</h3>'
};
});
在上面的程式碼中，app.directive()方法在模組中註冊了一個新的指令。這個方法的第一個參數是這個指令的名字。第二個參數是一個傳回指令定義物件的函數。如果你的指令依賴其他的物件或服務，例如 $rootScope, $http, 或$compile，他們可以在這個時間被注入。這個指令在HTML中以一個元素使用，如下：
<hello-world/> //OR <hello:world/>
或者，以一個屬性的方式使用：
<div hello-world></div> //OR <div hello:world/>
如果你想要符合HTML5的規範，你可以在元素前面加上 x- 或 data-的前綴。所以下面的標記也會符合 helloWorld 指令：
<div data-hello-world></div> //OR <div x-hello-world></div>
注意： 在匹配指令的时候，Angular会在元素或者属性的名字中剔除 x- 或者 data- 前缀。 然后将 – 或者 : 连接的字符串转换成驼峰(camelCase)表现形式，然后再与注册过的指令进行匹配。这是为什么，我们在HTML中以 hello-world 的方式使用 helloWorld 指令。其实，这跟HTML对标签和属性不区分大小写有关。 尽管上面的指令仅仅实现了静态文字的显示，但是这里还是有一些有趣的点值得我们去挖掘。我们在指令定义过程中使用了三个属性来配置指令。我们来一一介绍他们的作用。
restrict – 这个属性用来指定指令在HTML中如何使用（还记得之前说的，指令的四种表示方式吗）。在上面的例子中，我们使用了 ‘AE'。所以这个指令可以被当作新的HTML元素或者属性来使用。如果要允许指令被当作class来使用，我们将 restrict 设置成 ‘AEC'。
template – 这个属性规定了指令被Angular编译和链接（link）后生成的HTML标记。这个属性值不一定要是简单的字符串。template 可以非常复杂，而且经常包含其他的指令，以及表达式({{ }})等。更多的情况下你可能会见到 templateUrl， 而不是 template。所以，理想情况下，你应该将模板放到一个特定的HTML文件中，然后将 templateUrl 属性指向它。
replace – 这个属性指明生成的HTML内容是否会替换掉定义此指令的HTML元素。在我们的例子中，我们用 edd05d9b720c954eda8df66606fc7d416d95f50462131a27fde32c4d9df5bdd4的方式使用我们的指令，并且将 replace 设置成 true。所以，在指令被编译之后，生成的模板内容替换掉了 edd05d9b720c954eda8df66606fc7d416d95f50462131a27fde32c4d9df5bdd4。最终的输出是 684271ed9684bde649abda8831d4d355Hello World!!39528cedfa926ea0c01e69ef5b2ea9b0。如果你将 replace 设置成 false，也就是默认值，那么生成的模板会被插入到定义指令的元素中。
打开这个 plunker，在”Hello World!!”右键检查元素内容，来更形象地明白这些。
Link函数和Scope
指令生成出的模板其实没有太多意义，除非它在特定的scope下编译。默认情况下，指令并不会创建新的子scope。更多的，它使用父scope。也就是说，如果指令存在于一个controller下，它就会使用这个controller的scope。 如何运用scope，我们要用到一个叫做 link 的函数。它由指令定义对象中的link属性配置。让我们来改变一下我们的 helloWorld 指令，当用户在一个输入框中输入一种颜色的名称时，Hello World 文字的背景色自动发生变化。同时，当用户在 Hello World 文字上点击时，背景色变回白色。 相应的HTML标记如下：
<body ng-controller="MainCtrl"> <input type="text" ng-model="color" placeholder="Enter a color" /> <hello-world/> </body>
修改后的 helloWorld 指令如下：
app.directive('helloWorld', function() {
return {
restrict: 'AE',
replace: true,
template: '<p style="background-color:{{color}}">Hello World',
link: function(scope, elem, attrs) {
elem.bind('click', function() {
elem.css('background-color', 'white');
scope.$apply(function() {
scope.color = "white";
});
});
elem.bind('mouseover', function() {
elem.css('cursor', 'pointer');
});
}
};
});
我们注意到指令定义中的 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 处理函数用来重置 e388a4556c0f65e1904146cc1a846bee 的背景色，而 mouseover 处理函数改变鼠标为 pointer。在模板中有一个表达式 {{color}}，当父scope中的 color 发生变化时，它用来改变 Hello World 文字的背景色。 这个 plunker 演示了这些概念。
compile函数
compile 函数在 link 函数被执行之前用来做一些DOM改造。它接收下面的参数：
tElement – 指令所在的元素
attrs – 元素上赋予的参数的标准化列表
要注意的是 compile 函数不能访问 scope，并且必须返回一个 link 函数。但是如果没有设置 compile 函数，你可以正常地配置 link 函数，（有了compile，就不能用link，link函数由compile返回）。compile函数可以写成如下的形式：
app.directive('test', function() {
return {
compile: function(tElem,attrs) {
//do optional DOM transformation here
return function(scope,elem,attrs) {
//linking function here
};
}
};
});
大多数的情况下，你只需要使用 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 属性来配置。下面的代码片段是一个例子：
app.directive('helloWorld', function() {
return {
scope: true,
// use a child scope that inherits from parent
restrict: 'AE',
replace: 'true',
template: '<h3>Hello World!!</h3>'
};
});
上面的代码，让Angular给指令创建一个继承自父socpe的新的子scope。 另外一个选择，隔离的scope：
app.directive('helloWorld', function() {
return {
scope: {},
// use a new isolated scope
restrict: 'AE',
replace: 'true',
template: '<h3>Hello World!!</h3>'
};
});
这个指令使用了一个隔离的scope。隔离的scope在我们想要创建可重用的指令的时候是非常有好处的。通过使用隔离的scope，我们能够保证我们的指令是自包含的，可以被很容易的插入到HTML应用中。 它内部不能访问父的scope，所保证了父scope不被污染。 在我们的 helloWorld 指令例子中，如果我们将 scope 设置成 {}，那么上面的代码将不会工作。 它会创建一个新的隔离的scope，那么相应的表达式 {{color}} 会指向到这个新的scope中，它的值将是 undefined. 使用隔离的scope并不意味着我们完全不能访问父scope的属性。其实有一些技术可以允许我们访问父scope的属性，甚至监视他们的变化。我们会在指令这个系列的第二部分中讨论这些技术，以及一些更高级的概念，比如 Controller 函数。 第二部分也会和你一起使用Angular指令创建一个较为丰富的记事本应用。
关于AngularJS 中的指令实践指南(一)，小编就给大家介绍到这里，下面文章讲给大家介绍angularjs中的指令实践开发指南二(二)，希望对大家有所帮助！