カテゴリー別アーカイブ: ディレクティブ

AngularJS ng-optionsディレクティブ

ng-optionsディレクティブはselectがもつoptionやoptgroupを動的に作成する場合に便利なディレクティブです.

基本的な構文は,

値 as ラベル group by グループ for 1要素 in ハッシュの配列

もっとも, optgroupが不要だったり, ラベルと値が同じ場合はそれぞれ, group by グループ / as ラベルを省略しても大丈夫です.

ただし, ng-optionsディレクティブを機能させるには必ずng-modelディレクティブが必要っぽいです. これはハマってしまったのでみなさんご注意を.

AngularJS ng-show / ng-hideディレクティブを利用するときの注意点

ng-show / ng-hideディレクティブは単純でありながら, 使いどころが非常に多くて重宝するディレクティブです.

しかしながら, CSSでdisplay : none を指定していると, モデルを変更しても非表示のままになってしまうのでご注意を !!

jQuery UIのコンポーネントをAngularJSのカスタムディレクティブでラップしてみた

jQuery UIのコンポーネントといっても数が多いので, とりあえず, 自分がよく利用する, Slider / Spinner / Dialog の3つを, AngularJSのカスタムディレクティブを利用してラップしたモジュールを作成してみました.

AngularJS セレクトメニューとng-change

セレクトメニュー (<select>) でアイテムを選択した場合に何らかの処理を実行したい場合はng-changeディレクティブを利用します.

ただし, ng-changeは必ずng-modelディレクティブでモデルをバインディングしておく必要があります.

controller.js

var app = angular.module('selectApp', []);

app.controller('SelectController', function($scope) {
     $scope.selectedItem = null;  //バインドするモデル

     //ng-changeでバインドするイベントハンドラ
    //イベントオブジェクトは渡されないので注意
    $scope.changeItem = function() {
          console.log($scope.selectedItem):  //-> 選択されたアイテムの値
     }
});

select.html

<!--  ...  -->

<select ng-controller="SelectController" ng-model="selectedItem" ng-change="changeItem">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
</select>

久々のAngularJSネタでした.

AngularJS ファイルアップロードのディレクティブ

AngularJSでは, <input type=”file” />にng-changeでイベントハンドラを設定してもうまくいかない.

そこで, ディレクティブを作成するという解決方法がセオリー (らしい)

ポイントは, directiveの作成で, コールバック関数が返すオブジェクトにlinkプロパティを設定することです.
ここで, Fileオブジェクトを取得するためのイベント処理を定義しておきます.

あとは, <input type=”file”>の属性にディレクティブ名を指定するだけです.

このとき注意すべきことは, 属性名にハイフン (-)  を使うのはOKですが, その場合, ディレクティブ名はハイフンを除いて, ローワーキャメル形式 (先頭の単語以外の1文字目を大文字にしてつなぐ命名形式) にしないとダメです.