Skip to content

Latest commit

 

History

History
139 lines (97 loc) · 5.38 KB

readme.md

File metadata and controls

139 lines (97 loc) · 5.38 KB

$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).

$uibModal's open function

options parameter

  • 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 with controllerAs & set to true, 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 $uibModalInstance injectable to access the modal instance.

  • controllerAs (Type: string, Example: ctrl) - An alternative to the controller-as syntax. Requires the controller option 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 the body element when the modal is opened.

  • resolve (Type: Object) - Members that will be resolved and passed to the controller as locals; it is equivalent of the resolve property 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 the modal- class, i.e. a value of sm gives modal-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 a template or templateUrl.

  • 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.

return

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.

Also, when using bindToController, you can define an $onInit method in the controller that will fire upon initialization.

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 $close and $dismiss methods 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.