検索
連載

AngularJSを使いこなすなら絶対に知っておきたいフィルタとカスタムディレクティブの基本：MEANスタックで始めるWebアプリ開発入門（10）（3/3 ページ）

MEANスタックを用いたWebアプリの開発方法について紹介していく本連載。今回は、AngularJSでもよく使用する機能であるフィルタの使い方とそのカスタマイズ方法、そして、独自で定義するディレクティブ（カスタムディレクティブ）の作成について解説。

[中村修太，クラスメソッド] PC用表示 関連情報
Share
Tweet
LINE
Hatena
前のページへ | 　　　　　　

カスタムディレクティブとは

　連載第8回の「Web開発者が覚えておきたい、よく使うAngularJSのビルトインディレクティブ12選まとめ」では「AngularJSで提供されているHTMLを拡張する仕組みを使って作成した機能をディレクティブと呼ぶ」と解説しまた。

　ディレクティブとは再利用可能なUI部品です。AngularJSでは、このディレクティブを使用してアプリを作成していきますが、デフォルトのディレクティブ（ビルトインディレクティブ）だけでは要件を満たせない場合があります。そういった場合や画面構成要素をまとめたい場合には、自分でディレクティブを作成する必要があります。

　ディレクティブの機能は多く、実装するために知らなければならないこともあるため、本章ではシンプルなカスタムディレクティブ作成を通じてディレクティブの基本動作を確認してみます。

カスタムディレクティブの作り方

　下記のようなシンプルなカスタムディレクティブを記述してみましょう。

・
・
<script>
    var myApp = angular.module('mySimpleApp', []);
 
    myApp.controller('myController', ['$scope',
        function ($scope) {
        }
    ]).directive('mySimpleDirective', function () {
        return {
            //コンパイル
            compile: function (tElement, tAttrs, tTransclude) {
 
                console.log("compile!");
                tElement.text("my simple diretive.");
                //リンク
                return function link(scope, element, attrs, controller) {
                    console.log("link!");
                    scope.$watch('message', function (newValue) {
                        console.log("watch!");
                        tElement.text(newValue);
                    });
                };
            }
        }
    });
</script>
 
<body ng-controller="myController">
    <input type="text" ng-model="message">
    <!-- my-simple-directiveディレクティブの使用 -->
    <div my-simple-directive></div>
</body>

　カスタムディレクティブは、directive関数を使用して定義します。このプログラムを実行すると、ログには下記の順に表示され、画面には「my simple diretive.」という文字列が表示されます。

compile!
link!
watch!

　また、テキストボックスに値を入力すると、my-simple-directiveの値も同期されます（watch関数も、そのたびに実行される）。

　では、この処理の流れについて簡単に説明していきましょう。

【1】コンパイルの実行

　AngurarJSでは、アプリの起動時にHTML内からディレクティブを探します。このサンプルでは「my-simple-directive」が見つけられ、コンパイルが行われます（compile関数が実行される）。

　compile関数の引数は3つあり、下記を受け取ります。

  • ディレクティブ適用箇所の要素
  • ディレクティブ適用箇所の属性
  • ディレクティブの子要素展開用関数

【2】リンクの実行

　コンパイルの後はリンク処理が実行されます。リンク処理ではスコープとのバインドが行われるので、ここで$watchを使用して変数監視を指定します。なお、リンクはlink関数を定義するか、サンプルのようにcompile関数の戻り値としてlink関数を定義します。

【3】$watchに対して$digestループを実行

　$watchで指定したプロパティ（$scope.message）の変更をチェックし、変更があればDOMの書き換えを行います。

　なお、$digestと$digestループの詳細な説明については、下記サイトなどの情報をご確認ください。

次回はカスタムディレクティブの詳細について

　今回はよく使用するフィルタの使い方と、カスタムフィルタの定義方法、カスタムディレクティブの基本を紹介しました。

　次回はカスタムディレクティブの詳細について紹介する予定です。

著者紹介

中村修太（なかむら しゅうた）

中村修太

クラスメソッド勤務の新しもの好きプログラマーです。数年前に東京から山口県に引っ越し、現在もリモート勤務しています。最近の趣味は空手とぬか漬け作り。


Copyright © ITmedia, Inc. All Rights Reserved.

前のページへ | 　　　　　　
ページトップに戻る