Use the wj-popup directive to add Popup controls to your AngularJS applications.

The popup content may be specified inside the wj-popup tag, and can contain an arbitrary HTML fragment with AngularJS bindings and directives.

Note that directive and parameter names must be formatted as lower-case with dashes instead of camel-case. For example:

<p>Here is a Popup control triggered by a button:</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>

The wj-popup directive supports the following attributes:

control

= A reference to the Popup control created by this directive.

fade-in

@ A boolean value that determines whether popups should be shown using a fade-in animation.

fade-out

@ A boolean value that determines whether popups should be hidden using a fade-out animation.

hide-trigger

@ A PopupTrigger value defining the action that hides the Popup.

initialized

& This event occurs after the binding has finished initializing the control with attribute values.

is-initialized

= A value indicating whether the binding has finished initializing the control with attribute values.

owner

@ A CSS selector referencing an element that controls the popup visibility.

show-trigger

@ A PopupTrigger value defining the action that shows the Popup.

modal

@ A boolean value that determines whether the Popup should be displayed as a modal dialog.

got-focus

& The Popup.gotFocus event handler.

lost-focus

& The Popup.lostFocus event handler.

showing

& The Popup.showing event handler.

shown

& The Popup.shown event handler.

hiding

& The Popup.hiding event handler.

hidden

& The Popup.hidden event handler.