---

$ionicModal

$ionicModal can overlay the main content of the user interface.

You can embed the following code in your index file or other files (the inner code can be adjusted according to your specific business scenarios).

My Modal title

Hello!

Then you can inject `$ionicModal` into your Controller. After that, call the template you just wrote to perform initialization operations, as shown in the code below:

angular.module('testApp', ['ionic']).controller('MyController', function($scope, $ionicModal) { $ionicModal.fromTemplateUrl('my-modal.html', { scope: $scope, animation: 'slide-in-up' }).then(function(modal) { $scope.modal = modal; }); $scope.openModal = function() { $scope.modal.show(); }; $scope.closeModal = function() { $scope.modal.hide(); }; //Cleanup the modal when we're done with it! $scope.$on('$destroy', function() { $scope.modal.remove(); }); // Execute action on hide modal $scope.$on('modal.hidden', function() { // Execute action }); // Execute action on remove modal $scope.$on('modal.removed', function() { // Execute action });});

Methods

fromTemplate(templateString, options)

Parameter	Type	Description
templateString	String	The template string used as the modal window content.
options	Object	Options passed to the ionicModal#initialize method.

Returns: Object, an instance of the ionicModal controller.

fromTemplateUrl(templateUrl, options)

Parameter	Type	Description
templateUrl	String	The URL to load the template from.
options	Object	An object passed via the ionicModal#initialize method.

Returns: Promise object. The Promises object is a specification proposed by the CommonJS working group, aiming to provide a unified interface for asynchronous programming.

---

ionicModal

Instantiated by the `$ionicModal` service.

Tip: When cleaning up each module, make sure to call the `remove()` method to avoid memory leaks.

Note: A modal broadcasts 'modal.shown' and 'modal.hidden' from its initial scope, passing itself as an argument.

Methods

initialize(optional)

Creates a new modal window controller instance.

Parameter	Type	Description
options	Object	An options object with the following properties: * `{object=}`scope Child scope. Default: creates a child of `$rootScope`. * `{string=}`animation Animation used for showing or hiding. Default: 'slide-in-up' * `{boolean=}`focusFirstInput Whether the first input element of the modal automatically receives focus when shown. Default: false. * `{boolean=}`backdropClickToClose Whether to close the modal when clicking the backdrop. Default: true.

show()

Shows the modal window instance.

• Return Value: promise Promise object, resolved after the modal animation completes.

hide()

Hides the modal window.

• Return Value: promise Promise object, resolved after the modal animation completes.

remove()

Removes the modal window instance from the DOM and cleans it up.

• Return Value: promise Promise object, resolved after the modal animation completes.

isShown()

• Returns: Boolean, used to determine if the modal window is shown.

---

Example

HTML Code

Contacts

{{contact.name}}

New Contact

Cancel

CSS Code

body { cursor: url(''), auto;}

JavaScript Code

angular.module('ionicApp', ['ionic']).controller('AppCtrl', function($scope, $ionicModal) { $scope.contacts = [ { name: 'Gordon Freeman' }, { name: 'Barney Calhoun' }, { name: 'Lamarr the Headcrab' }, ]; $ionicModal.fromTemplateUrl('templates/modal.html', { scope: $scope }).then(function(modal) { $scope.modal = modal; }); $scope.createContact = function(u) { $scope.contacts.push({ name: u.firstName + ' ' + u.lastName }); $scope.modal.hide(); };});