Use the wj-popup ディレクティブは、AngularJSアプリケーションに Popup コントロールを追加する場合に使用します。

ポップアップの内容は wj-popup tag, and can タグ内で指定します。これには、任意のHTMLフラグメントとAngularJSバインディングおよびディレクティブを含めることができます。

ディレクティブ名とパラメーター名の書式は、キャメルケースではなくダッシュで結んだ小文字にする必要があります 次に例を示します。

<p>ボタンによって表示されるPopupコントロール:</p>
<button id="btn2" type="button">
    Click to show Popup
</button>
<wj-popup owner="#btn2" show-trigger="Click" hide-trigger="Blur">
    <h3>
        Salutation
    </h3>
    <div class="popover-content">
        Hello {​{firstName}} {​{lastName}}
    </div>
</wj-popup>

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

control

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

fade-in

@ フェードインアニメーションを使用してポップアップを表示するかどうかを決定するブール値。

fade-out

@ フェードアウトアニメーションを使用してポップアップを非表示にするかどうかを決定するブール値。

hide-trigger

@ Popup を非表示にするアクションを定義する PopupTrigger 値。

initialized

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

is-initialized

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

owner

@ ポップアップの表示/非表示を制御する要素を参照するCSSセレクター。

show-trigger

@ Popup を表示するアクションを定義する PopupTrigger 値。

modal

@ Popup をモーダルダイアログとして表示するかどうかを決定するブール値。

got-focus

& The Popup.gotFocus イベントハンドラ。

lost-focus

& The Popup.lostFocus イベントハンドラ。

showing

& The Popup.showing イベントハンドラ。

shown

& The Popup.shown イベントハンドラ。

hiding

& The Popup.hiding イベントハンドラ。

hidden

& The Popup.hidden イベントハンドラ。