ベーシックなカスタムDirectiveの作り方

じゃんけんの結果に応じてclass属性を設定する

じゃんけんプログラムを例にAngularJSのDirectiveを利用してみる。

Directiveを利用すれば、controllerから渡されたscopeの状態に応じて、viewのelementや属性を動的に変更することができる。下のHTMLには、

myhand

属性が設定されていて、その値としてじゃんけんの種類を設定することができる。

<div class="panel">
    <span ng-controller="jkenCtrl" myhand="choki" class="label">相手は「{{machine}}」を出しました</span>
</div>

カスタムDirectiveを定義する前に、ModelとControllerを設定しておく。

Modelでじゃんけんの種類を配列で定義しておく。

var arr = ["goo", "choki", "paa"];

Controllerは以下のようにした。

var ajs = angular.module("App", []);

ajs.controller("jkenCtrl", function ($scope) {
    $scope.index = Math.floor(Math.random() * arr.length);
    $scope.machine = arr[$scope.index];
});

配列の添え字をランダムに取得して、関連する値と添え字の両方を$scopeに設定した。

カスタムDirectiveのコード

myhandディレクティブは以下のようにした。

ajs.directive("myhand", function () {
    return function (scope, element, attrs) {

    var my_index = arr.indexOf(attrs["myhand"]);

    if (scope.machine == attrs["myhand"])
    {
        // あいこの場合
    }

    else if(scope.index-my_index==-1 || scope.index-my_index==2)
    {
        // 負けの場合
        element.addClass('alert');
	$compile(element);
    }

    else
    {
        // 勝ちの場合
        element.addClass('success');
	$compile(element);
    }
    }
});

じゃんけんプログラムの判定処理については、一番簡単なJavaScriptプログラムのサイトを参考にした。

カスタムDirectiveの中で、

• scope
• element
• attrs

上の各データを利用してifの判定や、elementに対するclass属性の設定を行っている。elementに属性を追加した後は再コンパイルが必要となった。

AngularJSのDirectiveは機能が豊富なので、シンプルな例を模索したところじゃんけんプログラムをカスタムDirective化することになった。