# Wijmo_Angular_Input.Wjpopup ## Content

WjPopup Class

AngularJS directive for the Popup control.

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.

Heirarchy