AngularJS ディレクティブ実践開発ガイド (1)_AngularJS-jsチュートリアル-php.cn

AngularJS ディレクティブ実践開発ガイド (1)_AngularJS

May 16, 2016 pm 03:09 PM

ディレクティブは、AngularJS アプリケーションの最も重要な部分です。 AngularJS はすでに非常に豊富なディレクティブのセットを提供していますが、多くの場合、アプリケーション固有のディレクティブを作成する必要があります。このチュートリアルでは、命令をカスタマイズする方法と、実際のプロジェクトでの使用方法を紹介します。この記事の最後 (パート 2) では、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 を拡張することです。したがって、日付ピッカーディレクティブは次の形式になります:

1	`<input type="text"` `/>`

ログイン後にコピー

またはこれ:

1	`<input type="text"` `/>`

ログイン後にコピー

UI コンポーネントを作成するこの方法は、より直接的かつ明確です。要素を見れば、これが何であるかを簡単に理解できます。

カスタムディレクティブを作成します:

Angular ディレクティブには、次の 4 つの表現形式があります: 1. 新しい HTML 要素 (<data-picker></data-picker>) 2. 要素の属性 (<input type="text ” data-picker/>) 3. CSS クラス (<input type=”text” class=”data-picker”/>) 4. コメント (<!–directive:data-picker –>)もちろん、ディレクティブが HTML 内でどのように表示されるかを制御できます。 AngularJS で典型的なディレクティブを記述する方法を見てみましょう。ディレクティブの登録はコントローラーと同じ方法で行われますが、ディレクティブ構成プロパティを持つ単純なオブジェクト (ディレクティブ定義オブジェクト) を返します。以下のコードは、単純な Hello World ディレクティブです。

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

ログイン後にコピー

上記のコードでは、app.directive() メソッドがモジュールに新しいディレクティブを登録します。このメソッドの最初のパラメータはディレクティブの名前です。 2 番目のパラメーターは、ディレクティブ定義オブジェクトを返す関数です。ディレクティブが $rootScope、$http、$compile などの他のオブジェクトやサービスに依存している場合は、この時点でそれらを挿入できます。このディレクティブは、次のように HTML の要素として使用されます:

&lt;hello-world/&gt;
//OR
&lt;hello:world/&gt;

ログイン後にコピー

または、属性として使用します:

&lt;div hello-world&gt;&lt;/div&gt;
//OR
&lt;div hello:world/&gt;

ログイン後にコピー

HTML5 仕様に準拠したい場合は、要素の前に x- または data- プレフィックスを追加できます。したがって、次のタグも helloWorld ディレクティブと一致します:

&lt;div data-hello-world&gt;&lt;/div&gt;
//OR
&lt;div x-hello-world&gt;&lt;/div&gt;

ログイン後にコピー

注意：在匹配指令的时候，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元素。在我们的例子中，我们用 <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标记如下：

&lt;body ng-controller="MainCtrl"&gt;
&lt;input type="text" ng-model="color" placeholder="Enter a color" /&gt;
&lt;hello-world/&gt;
&lt;/body&gt;

ログイン後にコピー

修改后的 helloWorld 指令如下：

app.directive('helloWorld', function() {
return {
restrict: 'AE',
replace: true,
template: '&lt;p style="background-color:{{color}}"&gt;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 处理函数用来重置 <p> 的背景色，而 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: '&lt;h3&gt;Hello World!!&lt;/h3&gt;'
};
});

ログイン後にコピー

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

app.directive('helloWorld', function() {
return {
scope: {}, 
// use a new isolated scope
restrict: 'AE',
replace: 'true',
template: '&lt;h3&gt;Hello World!!&lt;/h3&gt;'
};
});

ログイン後にコピー

这个指令使用了一个隔离的scope。隔离的scope在我们想要创建可重用的指令的时候是非常有好处的。通过使用隔离的scope，我们能够保证我们的指令是自包含的，可以被很容易的插入到HTML应用中。它内部不能访问父的scope，所保证了父scope不被污染。在我们的 helloWorld 指令例子中，如果我们将 scope 设置成 {}，那么上面的代码将不会工作。它会创建一个新的隔离的scope，那么相应的表达式 {{color}} 会指向到这个新的scope中，它的值将是 undefined. 使用隔离的scope并不意味着我们完全不能访问父scope的属性。其实有一些技术可以允许我们访问父scope的属性，甚至监视他们的变化。我们会在指令这个系列的第二部分中讨论这些技术，以及一些更高级的概念，比如 Controller 函数。第二部分也会和你一起使用Angular指令创建一个较为丰富的记事本应用。

关于AngularJS 中的指令实践指南(一)，小编就给大家介绍到这里，下面文章讲给大家介绍angularjs中的指令实践开发指南二(二)，希望对大家有所帮助！

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。