Panduan Pembangunan Praktikal untuk Arahan dalam AngularJS (1)_AngularJS

Arahan ialah bahagian paling penting dalam mana-mana aplikasi AngularJS. Walaupun AngularJS sudah menyediakan set arahan yang sangat kaya, selalunya perlu untuk mencipta arahan khusus aplikasi. Tutorial ini akan memberitahu anda cara menyesuaikan arahan dan memperkenalkan cara menggunakannya dalam projek sebenar. Pada penghujung artikel ini (Bahagian 2), saya akan membimbing anda tentang cara menggunakan arahan Sudut untuk mencipta aplikasi pad nota ringkas.

Ikhtisar

Arahan yang digunakan untuk memperkenalkan sintaks HTML baharu. Arahan ialah teg pada elemen DOM yang menyebabkan elemen tersebut mempunyai gelagat tertentu. Contohnya, HTML statik tidak tahu cara membuat dan memaparkan kawalan pemilih tarikh. Untuk menjadikan HTML mengenali sintaks ini, kita perlu menggunakan arahan. Arahan mencipta elemen yang menyokong pemilihan tarikh dalam beberapa cara. Kami akan menerangkan cara ini dilakukan langkah demi langkah. Jika anda pernah menulis aplikasi AngularJS, anda pasti telah menggunakan arahan, sama ada anda menyedarinya atau tidak. Anda mesti telah menggunakan arahan mudah seperti ng-mode, ng-repeat, ng-show, dll. Arahan ini memberikan gelagat khusus kepada elemen DOM. Contohnya, ng-repeat mengulangi elemen tertentu, dan ng-show secara bersyarat memaparkan elemen. Jika anda mahu elemen menyokong penyeretan, anda juga perlu mencipta arahan untuk melaksanakannya. Idea asas di sebalik arahan itu mudah. Ia menjadikan HTML benar-benar interaktif dengan mengikat pendengar acara kepada elemen atau menukar DOM.

perspektif jQuery

Bayangkan cara membuat pemilih tarikh menggunakan jQuery. Mula-mula, kami menambah kotak input biasa pada HTML, dan kemudian menggunakan jQuery untuk memanggil $(element).dataPicker() untuk menukarnya menjadi pemilih tarikh. Tetapi, fikirkanlah. Apabila pereka bentuk datang dan meneliti markup HTML, bolehkah dia segera meneka apa yang diwakili oleh medan ini? Adakah ini hanya kotak input ringkas atau pemilih tarikh? Anda perlu melihat kod jQuery untuk menentukannya. Pendekatan Angular adalah menggunakan arahan untuk melanjutkan HTML. Jadi, arahan pemilih tarikh boleh dalam bentuk berikut:

<input type="text" />

Atau ini:

<input type="text" />

Cara mencipta komponen UI ini adalah lebih langsung dan jelas. Anda boleh dengan mudah mengetahui perkara ini dengan melihat unsur-unsur.

Buat arahan tersuai:

Arahan Sudut boleh mempunyai empat bentuk ungkapan berikut: 1. Elemen HTML baharu (bd58549bf2658b48e28c17c1c4032335208fc95a7811bc2ac6e9f365abba8b59) 2. Atribut elemen (27dfaa091a2b1e7313d7a1cdf6ef1bce) 3. Kelas CSS (f8b1dee2e69e8a6f7c4709b5ebbf5411) 4. Ulasan (4285009b63da01f4cd1c95c6c6f3cf69) Daripada sudah tentu, kami boleh mengawal cara arahan kami muncul dalam HTML. Mari kita lihat cara menulis arahan biasa dalam AngularJS. Pendaftaran arahan dilakukan dengan cara yang sama seperti pengawal, tetapi ia mengembalikan objek mudah (objek definisi arahan) dengan sifat konfigurasi arahan. Kod di bawah ialah arahan Hello World yang mudah.

var app = angular.module('myapp', []);
app.directive('helloWorld', function() {
return {
restrict: 'AE',
replace: 'true',
template: '<h3>Hello World!!</h3>'
};
});

Dalam kod di atas, kaedah app.directive() mendaftarkan arahan baharu dalam modul. Parameter pertama kaedah ini ialah nama arahan. Parameter kedua ialah fungsi yang mengembalikan objek definisi arahan. Jika arahan anda bergantung pada objek atau perkhidmatan lain, seperti $rootScope, $http, atau $compile, ia boleh disuntik pada masa ini. Arahan ini digunakan sebagai elemen dalam HTML, seperti berikut:

<hello-world/>
//OR
<hello:world/>

Atau, gunakannya sebagai atribut:

<div hello-world></div>
//OR
<div hello:world/>

Jika anda ingin mematuhi spesifikasi HTML5, anda boleh menambah awalan x atau data di hadapan elemen. Jadi teg berikut juga akan sepadan dengan arahan 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中的指令实践开发指南二(二)，希望对大家有所帮助！