吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

directiveメソッドとは(Hello world)

2013年12月9日 / category : angularjs, directive, lab

AngularJSの中で最も重要な機能であるdirectiveメソッドを何回かに分けて解説してみる。
と、言っても、私自身directiveメソッドをいまのところうまく理解できていない。
なので、解説しつつ、自分の勉強という感じです。

さて、directiveメソッドとは、なんぞや。
「DOMを触る仕組み」とある記事に書いてあったが、そんな大雑把な理解で進めてみる。
AngularJSがすでに定義している「ng-model」「ng-view」なんかもdirectiveらしい。
要は、自身で作ったロジックをDOMに紐づける仕組みがdirectiveメソッドなのだと思っている。

directiveメソッドの形はいまのところ2パターンありそう。

myApp.directive('指定要素', function(){
	return {};
});

こんな記述方法と

myApp.directive('指定要素', function(){
	return function(scope, element, attr){};
});

こんな記述方法。

とりあえず、前者のほうを先に解説していきます。

具体的にどんなことができるのか。
まずは、directiveメソッドを使ってHello worldを作ってみます。

下記、サンプルです。
http://tsudoi.org/javascript/angularjs/Reference/Blog/11/hello_world/

このサンプルでやっていることを解説していきます。
まず、htmlコードから

■HTML – index.html
<!doctype html>
<html ng-app="app">
<head>
<meta charset="utf-8">
<title></title>
<script src="js/libs/angular.min.js"></script>
<script src="js/app.js"></script>
<link href="css/reset.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
</head>
<body>

<div ng-controller="Ctrl">
<my-directive></my-directive>
</div>

</body>
</html>

<my-directive></my-directive>
見慣れないタグがあります。
このタグは任意で作った要素です。
この要素に「Hello world !」を出力しています。

それでは出力しているコード(javascript)を見てみます。

■JavaScript – app.js
var myApp = angular.module('app', []);

myApp.controller('Ctrl', ['$scope', function($scope){
	$scope.prop = {
		msg: 'Hello world !'
	};
}]);

myApp.directive('myDirective', function(){
	return {
		restrict: 'E',
		template: '<p>{{prop.msg}}</p>'
	};
});

ここで何をやっているかというと、
まず、controllerメソッドでpropというオブジェクトを定義。
propオブジェクトにmsg属性を持たせ、’Hello world !’という文字列を格納しておきます。

次に、directiveメソッドで、template属性の値をreturnしています。
html側に定義した<my-directive>ですが、「-」を使用した場合、directiveメソッド側では、「-」の次の文字を大文字にして繋げるルールがあるようです。

<my-directive>(html側) → myDirective(directiveメソッド側)

restrict属性はいくつか種類の指定があります。

A: attribute指定(属性指定):デフォルト
例)<div my-directive=”exp”>

E: element指定(要素指定)
例)<my-directive>

C: class指定(クラス指定)
例)<div class=”my-directive: exp;”>

M: comment指定(コメント指定)
例)<!– directive: my-directive exp –>

template属性は、returnする内容です。
サンプルでは、
<p>{{prop.msg}}</p>
を格納することで、controllerメソッドで定義したprop.msgを代入して出力するようにしています。

以上が、directiveメソッドを使用した「Hello world」の仕組みとなります。