sm-modal
Creates a modal.

Attributes

visible = a variable which can be used to toggle the visiblity of the modal.
settings = reference to a settings object to pass to the initialization function.

Callback Attributes

on-init = Callback once the module is initialized, passing the initialized element as the first argument.
on-show = Callback when a modal starts to show.
on-visible = Callback after a modal has finished showing animating.
on-hide = Callback after a modal starts to hide.
on-hidden = Callback after a modal has finished hiding animation.
on-approve = Callback after a positive, approve or ok button is pressed. If the function returns false, the modal will not hide.
on-deny = Callback after a negative, deny or cancel button is pressed. If the function returns false the modal will not hide.

Example

Your inbox is getting full, would you like us to enable automatic archiving of old messages?

No

Yes

Behavior Directives

These attribute directives invoke a behavior on the component where the attribute value can be one of the following formats:

String

Selector to the dropdown(s) to invoke the behavior when the element with the directive is clicked.

Object

$ @ A selector string.
evt @ The event string which triggers the behavior ('click' by default).
enabled = A boolean value which determines whether or not the behavior should be called when the event occurs.
value = The first argument to pass to the behavior if it requires one.

Example

Execute Simple Behavior

Execute Advanced Behavior

Show

Your inbox is getting full, would you like us to enable automatic archiving of old messages?

No

Yes

Modal Directives
Create & Control Semantic UI Modals with Angular Directives

sm-modal
Creates a modal.

Attributes

Callback Attributes

Example

sm-modal-bind
A lightweight attribute directive which calls modal() on the element with the settings object passed to the attribute. Using this directive means you need to manage the communication between Angular and Semantic UI yourself.

Behavior Directives

String

Object

Example

sm-modal-show
When a DOM event fires on the element with the directive, it can command modal(s) to be shown.

sm-modal-hide
When a DOM event fires on the element with the directive, it can command modal(s) to be hidden.

sm-modal-toggle
When a DOM event fires on the element with the directive, it can command modal(s) to toggle their visibility.

sm-modal-refresh
When a DOM event fires on the element with the directive, it can command modal(s) to center themselves on the page.

sm-modal-show-dimmer
When a DOM event fires on the element with the directive, it can command modal(s) to show their dimmer.

sm-modal-hide-dimmer
When a DOM event fires on the element with the directive, it can command modal(s) to hide their dimmer.

sm-modal-hide-others
When a DOM event fires on the element with the directive, it can command modal(s) that aren't the selected ones to be hidden.

sm-modal-hide-all
When a DOM event fires on the element with the directive, it can command modal(s) to hide all visible modals in the same dimmer.

sm-modal-cache-sizes
When a DOM event fires on the element with the directive, it can command modal(s) to cache their current size.

sm-modal-set-active
When a DOM event fires on the element with the directive, it can command modal(s) to make themselves active.

Modal Directives Create & Control Semantic UI Modals with Angular Directives

sm-modal Creates a modal.

Attributes

Callback Attributes

Example

sm-modal-bind A lightweight attribute directive which calls modal() on the element with the settings object passed to the attribute. Using this directive means you need to manage the communication between Angular and Semantic UI yourself.

Behavior Directives

String

Object

Example

sm-modal-show When a DOM event fires on the element with the directive, it can command modal(s) to be shown.

sm-modal-hide When a DOM event fires on the element with the directive, it can command modal(s) to be hidden.

sm-modal-toggle When a DOM event fires on the element with the directive, it can command modal(s) to toggle their visibility.

sm-modal-refresh When a DOM event fires on the element with the directive, it can command modal(s) to center themselves on the page.

sm-modal-show-dimmer When a DOM event fires on the element with the directive, it can command modal(s) to show their dimmer.

sm-modal-hide-dimmer When a DOM event fires on the element with the directive, it can command modal(s) to hide their dimmer.

sm-modal-hide-others When a DOM event fires on the element with the directive, it can command modal(s) that aren't the selected ones to be hidden.

sm-modal-hide-all When a DOM event fires on the element with the directive, it can command modal(s) to hide all visible modals in the same dimmer.

sm-modal-cache-sizes When a DOM event fires on the element with the directive, it can command modal(s) to cache their current size.

sm-modal-set-active When a DOM event fires on the element with the directive, it can command modal(s) to make themselves active.

Modal Directives
Create & Control Semantic UI Modals with Angular Directives

sm-modal
Creates a modal.

sm-modal-bind
A lightweight attribute directive which calls modal() on the element with the settings object passed to the attribute. Using this directive means you need to manage the communication between Angular and Semantic UI yourself.

sm-modal-show
When a DOM event fires on the element with the directive, it can command modal(s) to be shown.

sm-modal-hide
When a DOM event fires on the element with the directive, it can command modal(s) to be hidden.

sm-modal-toggle
When a DOM event fires on the element with the directive, it can command modal(s) to toggle their visibility.

sm-modal-refresh
When a DOM event fires on the element with the directive, it can command modal(s) to center themselves on the page.

sm-modal-show-dimmer
When a DOM event fires on the element with the directive, it can command modal(s) to show their dimmer.

sm-modal-hide-dimmer
When a DOM event fires on the element with the directive, it can command modal(s) to hide their dimmer.

sm-modal-hide-others
When a DOM event fires on the element with the directive, it can command modal(s) that aren't the selected ones to be hidden.

sm-modal-hide-all
When a DOM event fires on the element with the directive, it can command modal(s) to hide all visible modals in the same dimmer.

sm-modal-cache-sizes
When a DOM event fires on the element with the directive, it can command modal(s) to cache their current size.

sm-modal-set-active
When a DOM event fires on the element with the directive, it can command modal(s) to make themselves active.