b>wj-color-picker/b> ディレクティブは、AngularJSアプリケーションに b>ColorPicker/b> コントロールを追加する場合に使用します。 ディレクティブ名とパラメーター名の書式は、キャメルケースではなくダッシュで結んだ小文字にする必要があります。 次に例を示します。

pre>lt;pgt;ColorPicker コントロール:lt;/pgt; lt;wj-color-picker value="theColor" show-alpha-channel="false"gt; lt;/wj-color-pickergt;/pre>

b>wj-color-picker/b> ディレクティブは以下の属性をサポートしています。

dl class="dl-horizontal"> dt>ng-model/dt> dd>code>@/code> Angularのng-modelディレクティブを使用してコントロールの b>value/b> property プロパティをバインドします。 ng-modelディレクティブを使用してプロパティをバインドすると、 データ検証やコントロールの状態のフォームインスタンスへの公開など、ng-modelの持つ利点を活用できます。 ng-modelディレクティブによってバインドされるコントロールのプロパティを再定義するには、 wj-model-property属性を使用します。/dd> dt>wj-model-property/dt> dd>code>@/code> b>ng-model/b> ディレクティブを使用してスコープにバインドされるコントロールプロパティを指定します。/dd> dt>control/dt> dd>code>=/code> このディレクティブによって作成された ColorPicker コントロールへの参照。/dd> dt>initialized/dt> dd>code>/code> このイベントは、バインディングによるコントロールの初期化が完了した後に発生します。/dd> dt>is-initialized/dt> dd>code>=/code> バインディングによるコントロールの初期化が完了したかどうかを示す値。 /dd> dt>show-alpha-channel/dt>dd>code>@/code> コントロールにアルファチャネル（透明度）エディタを表示するかどうかを示す値。/dd> dt>show-color-string/dt> dd>code>@/code> コントロールに編集する色の文字列表現を表示するかどうかを示す値。/dd> dt>palette/dt> dd>code>=/code> パレットとして使用する10個の色の値の配列。/dd> dt>value/dt> dd>code>=/code> 編集する色。/dd> dt>got-focus/dt> dd>code>/code> ColorPicker.gotFocus イベントハンドラ。/dd> dt>lost-focus/dt> dd>code>/code> ColorPicker.lostFocus イベントハンドラ。/dd> dt>value-changed/dt> dd>code>/code> ColorPicker.valueChanged イベントハンドラ。/dd> /dl>