AngularJS TIPS

AngularJS TIPS

自作ディレクティブの属性にAngular式や関数を設定するには?(scopeプロパティ)

2016年9月26日

自作ディレクティブ呼び出し側で指定した「属性の値(Angular式や関数)」をテンプレートに反映させることで、そのディレクティブ要素の下に埋め込まれるHTMLコードを動的に切り替える方法を説明する。

  • このエントリーをはてなブックマークに追加

 別稿「TIPS:ディレクティブで属性を設定するには?」では、scopeプロパティを利用することで、属性経由でディレクティブに文字列を渡す方法を紹介しました。

 引き続き本稿では、scopeプロパティを利用して属性にAngular式や関数を引き渡す例を紹介します。

scopeプロパティで利用した記号の意味

 別稿では、スコープオブジェクトに属性値をひも付ける際に@属性名という表現がありました。

JavaScript
scope: {
  name: '@wgName'
}
ディレクティブが属するスコープと属性のひも付け(該当箇所を抜粋)

 この@は、「属性値を『文字列』としてスコープオブジェクトにひも付けなさい」という意味です。ひも付けの方法に応じて、@の他に、以下の記号を利用することもできます。

  • =: 属性値を「Angular式」と解釈し、その評価値をひも付ける
  • &: 属性値を「関数」と解釈し、後から実行できるようにする

 では、これらの記号を利用した例を作成してみましょう。ここで作成する<wg-hello-scope>要素(ディレクティブ)は、以下の属性を指定できるものとします。

属性 概要 指定方法
wgName 名前 文字列
wgGreeting 挨拶 Angular式
wgMouseover マウスが乗った時の挙動 関数
<wg-hello-scope>要素で利用できる属性

 具体的なコードは、以下の通りです。

HTML
<!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>
属性経由でディレクティブにパラメーター(Angular式や関数)を渡すためのコード(scope.html)
属性で指定した値(文字列/Angular式/関数)に応じてメッセージを生成(関数の指定によりマウスオーバー時にはログも生成)
属性で指定した値(文字列/Angular式/関数)に応じてメッセージを生成(関数の指定によりマウスオーバー時にはログも生成)

 =で指定されたwgGreeting(=wg-greeting)属性の値はAngular式として、&で指定されたwgMouseover(=wg-mouseover)属性の値は関数として、それぞれ認識されていることが確認できます(1)。

 ただし、次のコードに示すように、@で指定された属性に対しても{{……}}表現を利用すれば、Angular式を渡すことは可能です。文字列もAngular式も渡したいというようなケースでは@を利用した方が融通は利くでしょう。

HTML
<wg-hello-scope wg-name="{{name}}" wg-type="greeting" wg-mouseover="onmouseover()"></wg-hello-scope>
「@」で指定された文字列の属性でも、{{……}}表現を利用すればAngular式が使える

このコードを試すには、当然ながら$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の「ディレクティブ」の単体テストを記述し、それを実行する方法を解説する。

イベント情報(メディアスポンサーです)

Twitterでつぶやこう!


Build Insider賛同企業・団体

Build Insiderは、以下の企業・団体の支援を受けて活動しています(募集概要)。

ゴールドレベル

  • グレープシティ株式会社
  • 日本マイクロソフト株式会社