modal-controller.js 5.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158
  1. import { Injectable } from '@angular/core';
  2. import { App } from '../app/app';
  3. import { Config } from '../../config/config';
  4. import { Modal } from './modal';
  5. import { DeepLinker } from '../../navigation/deep-linker';
  6. /**
  7. * @name ModalController
  8. * @description
  9. * A Modal is a content pane that goes over the user's current page.
  10. * Usually it is used for making a choice or editing an item. A modal uses the
  11. * `NavController` to
  12. * {@link /docs/api/components/nav/NavController/#present present}
  13. * itself in the root nav stack. It is added to the stack similar to how
  14. * {@link /docs/api/components/nav/NavController/#push NavController.push}
  15. * works.
  16. *
  17. * When a modal (or any other overlay such as an alert or actionsheet) is
  18. * "presented" to a nav controller, the overlay is added to the app's root nav.
  19. * After the modal has been presented, from within the component instance, the
  20. * modal can later be closed or "dismissed" by using the ViewController's
  21. * `dismiss` method. Additionally, you can dismiss any overlay by using `pop`
  22. * on the root nav controller. Modals are not reusable. When a modal is dismissed
  23. * it is destroyed.
  24. *
  25. * Data can be passed to a new modal through `Modal.create()` as the second
  26. * argument. The data can then be accessed from the opened page by injecting
  27. * `NavParams`. Note that the page, which opened as a modal, has no special
  28. * "modal" logic within it, but uses `NavParams` no differently than a
  29. * standard page.
  30. *
  31. * @usage
  32. * ```ts
  33. * import { ModalController, NavParams } from 'ionic-angular';
  34. *
  35. * @Component(...)
  36. * class HomePage {
  37. *
  38. * constructor(public modalCtrl: ModalController) { }
  39. *
  40. * presentProfileModal() {
  41. * const profileModal = this.modalCtrl.create(Profile, { userId: 8675309 });
  42. * profileModal.present();
  43. * }
  44. *
  45. * }
  46. *
  47. * @Component(...)
  48. * class Profile {
  49. *
  50. * constructor(params: NavParams) {
  51. * console.log('UserId', params.get('userId'));
  52. * }
  53. *
  54. * }
  55. * ```
  56. *
  57. * @advanced
  58. *
  59. * | Option | Type | Description |
  60. * |-----------------------|------------|------------------------------------------------------------------------------------------------------------------|
  61. * | showBackdrop |`boolean` | Whether to show the backdrop. Default true. |
  62. * | enableBackdropDismiss |`boolean` | Whether the popover should be dismissed by tapping the backdrop. Default true. |
  63. * | cssClass |`string` | Additional classes for custom styles, separated by spaces. |
  64. *
  65. * A modal can also emit data, which is useful when it is used to add or edit
  66. * data. For example, a profile page could slide up in a modal, and on submit,
  67. * the submit button could pass the updated profile data, then dismiss the
  68. * modal.
  69. *
  70. * ```ts
  71. * import { Component } from '@angular/core';
  72. * import { ModalController, ViewController } from 'ionic-angular';
  73. *
  74. * @Component(...)
  75. * class HomePage {
  76. *
  77. * constructor(public modalCtrl: ModalController) {
  78. *
  79. * }
  80. *
  81. * presentContactModal() {
  82. * let contactModal = this.modalCtrl.create(ContactUs);
  83. * contactModal.present();
  84. * }
  85. *
  86. * presentProfileModal() {
  87. * let profileModal = this.modalCtrl.create(Profile, { userId: 8675309 });
  88. * profileModal.onDidDismiss(data => {
  89. * console.log(data);
  90. * });
  91. * profileModal.present();
  92. * }
  93. *
  94. * }
  95. *
  96. * @Component(...)
  97. * class Profile {
  98. *
  99. * constructor(public viewCtrl: ViewController) {
  100. *
  101. * }
  102. *
  103. * dismiss() {
  104. * let data = { 'foo': 'bar' };
  105. * this.viewCtrl.dismiss(data);
  106. * }
  107. *
  108. * }
  109. * ```
  110. *
  111. * A common issue is that a developer may try to implement navigation in a modal, but when you try NavController.push(),
  112. * you will notice that the status bar on iOS gets cut off. The proper way to implement navigation in a modal is to
  113. * make the modal component a navigation container, and set the root page to the page you want to show in your modal.
  114. *
  115. * ```ts
  116. * @Component({
  117. * template: '<ion-nav [root]="rootPage" [rootParams]="rootParams"></ion-nav>'
  118. * })
  119. * export class MyModalWrapper {
  120. * rootPage = 'MyModalContentPage'; // This is the page you want your modal to display
  121. * rootParams;
  122. *
  123. * constructor(navParams: NavParams, private viewCtrl: ViewController) {
  124. * this.rootParams = Object.assign({}, navParams.data, {viewCtrl: viewCtrl});
  125. * // This line will send the view controller into your child views, so you can dismiss the modals from there.
  126. * }
  127. * }
  128. * ```
  129. * @demo /docs/demos/src/modal/
  130. * @see {@link /docs/components#modals Modal Component Docs}
  131. */
  132. export class ModalController {
  133. constructor(_app, config, deepLinker) {
  134. this._app = _app;
  135. this.config = config;
  136. this.deepLinker = deepLinker;
  137. }
  138. /**
  139. * Create a modal to display. See below for options.
  140. *
  141. * @param {object} component The Modal view
  142. * @param {object} data Any data to pass to the Modal view
  143. * @param {object} opts Modal options
  144. */
  145. create(component, data = {}, opts = {}) {
  146. return new Modal(this._app, component, data, opts, this.config, this.deepLinker);
  147. }
  148. }
  149. ModalController.decorators = [
  150. { type: Injectable },
  151. ];
  152. /** @nocollapse */
  153. ModalController.ctorParameters = () => [
  154. { type: App, },
  155. { type: Config, },
  156. { type: DeepLinker, },
  157. ];
  158. //# sourceMappingURL=modal-controller.js.map