AngularJS TIPS
自作ディレクティブの属性にAngular式や関数を設定するには？（scopeプロパティ）
自作ディレクティブ呼び出し側で指定した「属性の値（Angular式や関数）」をテンプレートに反映させることで、そのディレクティブ要素の下に埋め込まれるHTMLコードを動的に切り替える方法を説明する。
別稿「TIPS：ディレクティブで属性を設定するには？」では、scopeプロパティを利用することで、属性経由でディレクティブに文字列を渡す方法を紹介しました。
引き続き本稿では、scopeプロパティを利用して属性にAngular式や関数を引き渡す例を紹介します。
scopeプロパティで利用した記号の意味
別稿では、スコープオブジェクトに属性値をひも付ける際に@属性名という表現がありました。
|
scope: {
name: '@wgName'
}
|
この@は、「属性値を『文字列』としてスコープオブジェクトにひも付けなさい」という意味です。ひも付けの方法に応じて、@の他に、以下の記号を利用することもできます。
=： 属性値を「Angular式」と解釈し、その評価値をひも付ける&： 属性値を「関数」と解釈し、後から実行できるようにする
では、これらの記号を利用した例を作成してみましょう。ここで作成する<wg-hello-scope>要素（ディレクティブ）は、以下の属性を指定できるものとします。
| 属性 | 概要 | 指定方法 |
|---|---|---|
| wgName | 名前 | 文字列 |
| wgGreeting | 挨拶 | Angular式 |
| wgMouseover | マウスが乗った時の挙動 | 関数 |
具体的なコードは、以下の通りです。
|
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8" />
<title>AngularJS TIPS</title>
</head>
<body ng-controller="MyController">
<wg-hello-scope wg-name="山田太郎" wg-type="greeting" wg-mouseover="onmouseover()"></wg-hello-scope>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>
<script>
angular.module('myApp', [])
.directive('wgHelloScope', function() {
return {
restrict: 'E',
scope: {
name: '@wgName',
// 1Angular式や関数を指定
type: '=wgType',
mouseover: '&wgMouseover'
},
template: '<p style="background-color:Yellow" ng-mouseover="mouseover()">'
+ '{{type}}、{{name}}さん！</p>'
}
})
.controller('MyController', ['$scope', function($scope) {
$scope.greeting = 'おはようございます',
$scope.onmouseover = function() {
console.log(new Date());
}
}]);
</script>
</body>
</html>
|
=で指定されたwgGreeting（＝wg-greeting）属性の値はAngular式として、&で指定されたwgMouseover（＝wg-mouseover）属性の値は関数として、それぞれ認識されていることが確認できます（1）。
ただし、次のコードに示すように、@で指定された属性に対しても{{……}}表現を利用すれば、Angular式を渡すことは可能です。文字列もAngular式も渡したいというようなケースでは@を利用した方が融通は利くでしょう。
|
<wg-hello-scope wg-name="{{name}}" wg-type="greeting" wg-mouseover="onmouseover()"></wg-hello-scope>
|
※このコードを試すには、当然ながら$scope.name = '山田次朗',のようなコードをcontrollerメソッドの中に追記する必要がある。
処理対象：自作 カテゴリ：ディレクティブ
API：angular.Module カテゴリ：ng（コアモジュール） > type（型）
※以下では、本稿の前後を合わせて5回分（第74回～第78回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
74. ディレクティブ配下のコンテンツをテンプレートに反映させるには？（transcludeプロパティ）
自作ディレクティブ呼び出し側で指定した「配下のコンテンツ」をテンプレートに反映させることで、そのディレクティブ要素の下に埋め込まれるHTMLコードを動的に切り替える方法を説明する。
75. ディレクティブで属性を設定するには？（scopeプロパティ）
自作ディレクティブ呼び出し側で指定した「属性の値（文字列）」をテンプレートに反映させることで、そのディレクティブ要素の下に埋め込まれるHTMLコードを動的に切り替える方法を説明する。
76. 【現在、表示中】≫ 自作ディレクティブの属性にAngular式や関数を設定するには？（scopeプロパティ）
自作ディレクティブ呼び出し側で指定した「属性の値（Angular式や関数）」をテンプレートに反映させることで、そのディレクティブ要素の下に埋め込まれるHTMLコードを動的に切り替える方法を説明する。
77. 自作ディレクティブの挙動を定義するには？（controller／controllerAs／bindToControllerプロパティ）
テンプレートに基づき出力されるHTMLコードの内容を、イベントハンドラーなどを活用して動的に切り替えるために、コントローラー付きの独自ディレクティブを作成する方法を説明する。
78. AngularJSのディレクティブを単体テストするには？
テスティングフレームワーク「Karma＋Jasmin」を使って、AngularJSの「ディレクティブ」の単体テストを記述し、それを実行する方法を解説する。
