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

<p>ColorPicker コントロール:</p>
<wj-color-picker
  value="theColor"
  show-alpha-channel="false">
</wj-color-picker>

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

ng-model

@ Angularのng-modelディレクティブを使用してコントロールの value property プロパティをバインドします。 ng-modelディレクティブを使用してプロパティをバインドすると、 データ検証やコントロールの状態のフォームインスタンスへの公開など、ng-modelの持つ利点を活用できます。 ng-modelディレクティブによってバインドされるコントロールのプロパティを再定義するには、 wj-model-property属性を使用します。

wj-model-property

@ ng-model ディレクティブを使用してスコープにバインドされるコントロールプロパティを指定します。

control

= このディレクティブによって作成された ColorPicker コントロールへの参照。

initialized

& このイベントは、バインディングによるコントロールの初期化が完了した後に発生します。

is-initialized

= バインディングによるコントロールの初期化が完了したかどうかを示す値。

show-alpha-channel

@ コントロールにアルファチャネル（透明度）エディタを表示するかどうかを示す値。

show-color-string

@ コントロールに編集する色の文字列表現を表示するかどうかを示す値。

palette

= パレットとして使用する10個の色の値の配列。

value

= 編集する色。

got-focus

& ColorPicker.gotFocus イベントハンドラ。

lost-focus

& ColorPicker.lostFocus イベントハンドラ。

value-changed

& ColorPicker.valueChanged イベントハンドラ。