$uibModal is a service to create modal windows.
Creating modals is straightforward: create a template, a controller and reference them when using $uibModal.
The $uibModal service has only one method: open(options).
-
animation(Type:boolean, Default:true) - Set to false to disable animations on new modal/backdrop. Does not toggle animations for modals/backdrops that are already displayed. -
appendTo(Type:angular.element, Default:body: Example:$document.find('aside').eq(0)) - Appends the modal to a specific element. -
backdrop(Type:boolean|string, Default:true) - Controls presence of a backdrop. Allowed values:true(default),false(no backdrop),'static'(disables modal closing by click on the backdrop). -
backdropClass(Type:string) - Additional CSS class(es) to be added to a modal backdrop template. -
bindToController(Type:boolean, Default:false) - When used withcontrollerAs& set totrue, it will bind the $scope properties onto the controller. -
controller(Type:function|string|array, Example: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. -
controllerAs(Type:string, Example:ctrl) - An alternative to the controller-as syntax. Requires thecontrolleroption to be provided as well. -
keyboard- (Type:boolean, Default:true) - Indicates whether the dialog should be closable by hitting the ESC key. -
openedClass(Type:string, Default:modal-open) - Class added to thebodyelement when the modal is opened. -
resolve(Type:Object) - Members that will be resolved and passed to the controller as locals; it is equivalent of theresolveproperty in the router. -
scope(Type:$scope) - The parent scope instance to be used for the modal's content. Defaults to$rootScope. -
size(Type:string, Example:lg) - Optional suffix of modal window class. The value used is appended to themodal-class, i.e. a value ofsmgivesmodal-sm. -
template(Type:string) - Inline template representing the modal's content. -
templateUrl(Type:string) - A path to a template representing modal's content. You need either atemplateortemplateUrl. -
windowClass(Type:string) - Additional CSS class(es) to be added to a modal window template. -
windowTemplateUrl(Type:string, Default:uib/template/modal/window.html) - A path to a template overriding modal's window template. -
windowTopClass(Type:string) - CSS class(es) to be added to the top modal window.
Global defaults may be set for $uibModal via $uibModalProvider.options.
The open method returns a modal instance, an object with the following properties:
-
close(result)(Type:function) - Can be used to close a modal, passing a result. -
dismiss(reason)(Type:function) - Can be used to dismiss a modal, passing a reason. -
result(Type:promise) - Is resolved when a modal is closed and rejected when a modal is dismissed. -
opened(Type:promise) - Is resolved when a modal gets opened after downloading content's template and resolving all variables. -
closed(Type:promise) - Is resolved when a modal is closed and the animation completes. -
rendered(Type:promise) - Is resolved when a modal is rendered.
The scope associated with modal's content is augmented with:
-
$close(result)(Type:function) - A method that can be used to close a modal, passing a result. -
$dismiss(reason)(Type: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.
Events fired:
-
$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$closeand$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.
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.