$uibModal is a service to create modal windows.
Creating modals is straightforward: create a template and controller, and reference them when using
$uibModal service has only one method:
$uibModal's open function
true) - Set to false to disable animations on new modal/backdrop. Does not toggle animations for modals/backdrops that are already displayed.
$document.find('aside').eq(0)) - Appends the modal to a specific element.
my-modal-description) - Sets the
aria-describedbyproperty on the modal. The value should be an id (without the leading
#) pointing to the element that describes your modal. Typically, this will be the text on your modal, but does not include something the user would interact with, like buttons or a form. Omitting this option will not impact sighted users but will weaken your accessibility support.
my-modal-title) - Sets the
aria-labelledbyproperty on the modal. The value should be an id (without the leading
#) pointing to the element that labels your modal. Typically, this will be a header element. Omitting this option will not impact sighted users but will weaken your accessibility support.
true) - Controls presence of a backdrop. Allowed values:
'static'(disables modal closing by click on the backdrop).
string) - Additional CSS class(es) to be added to a modal backdrop template.
false) - When used with
controllerAs& set to
true, it will bind the $scope properties onto the controller.
myComponent) - A string reference to the component to be rendered that is registered with Angular's compiler. If using a directive, the directive must have
restrict: 'E'and a template or templateUrl set.
It supports these bindings:
close- A method that can be used to close a modal, passing a result. The result must be passed in this format:
dismiss- A method that can be used to dismiss a modal, passing a result. The result must be passed in this format:
modalInstance- The modal instance. This is the same
$uibModalInstanceinjectable found when using
resolve- An object of the modal resolve values. See UI Router resolves for details.
MyModalController) - A controller for the modal instance, either a controller name as a string, or an inline controller function, optionally wrapped in array notation for dependency injection. Allows the controller-as syntax. Has a special
$uibModalInstanceinjectable to access the modal instance.
ctrl) - An alternative to the controller-as syntax. Requires the
controlleroption to be provided as well.
true) - Indicates whether the dialog should be closable by hitting the ESC key.
modal-open) - Class added to the
bodyelement when the modal is opened.
Object) - Members that will be resolved and passed to the controller as locals; it is equivalent of the
resolveproperty in the router.
$scope) - The parent scope instance to be used for the modal's content. Defaults to
lg) - Optional suffix of modal window class. The value used is appended to the
modal-class, i.e. a value of
string) - Inline template representing the modal's content.
string) - A path to a template representing modal's content. You need either a
string) - Additional CSS class(es) to be added to a modal window template.
uib/template/modal/window.html) - A path to a template overriding modal's window template.
string) - CSS class(es) to be added to the top modal window.
Global defaults may be set for
open method returns a modal instance, an object with the following properties:
function) - Can be used to close a modal, passing a result.
function) - Can be used to dismiss a modal, passing a reason.
promise) - Is resolved when a modal is closed and rejected when a modal is dismissed.
promise) - Is resolved when a modal gets opened after downloading content's template and resolving all variables.
promise) - Is resolved when a modal is closed and the animation completes.
promise) - Is resolved when a modal is rendered.
The scope associated with modal's content is augmented with:
function) - A method that can be used to close a modal, passing a result.
function) - A method that can be used to dismiss a modal, passing a reason.
Those methods make it easy to close a modal window without a need to create a dedicated controller.
Also, when using
bindToController, you can define an
$onInit method in the controller that will fire upon initialization.
$uibUnscheduledDestruction- This event is fired if the $scope is destroyed via unexpected mechanism, such as it being passed in the modal options and a $route/$state transition occurs. The modal will also be dismissed.
modal.closing- This event is broadcast to the modal scope before the modal closes. If the listener calls preventDefault() on the event, then the modal will remain open. Also, the
$dismissmethods returns true if the event was executed. This event also includes a parameter for the result/reason and a boolean that indicates whether the modal is being closed (true) or dismissed.
UI Router resolves
If one wants to have the modal resolve using UI Router's pre-1.0 resolve mechanism, one can call
$uibResolve.setResolver('$resolve') in the configuration phase of the application. One can also provide a custom resolver as well, as long as the signature conforms to UI Router's $resolve.
When the modal is opened with a controller, a
$resolve object is exposed on the template with the resolved values from the resolve object. If using the component option, see details on how to access this object in component section of the modal documentation.