Ionic Modal usage

ionic-v1
1

Hi can some one explain in detail for what IonicModel service is used for and what the below method does
$ionicModal.fromTemplateUrl(‘my-modal.html’, {

}).then(function(modal) {

});

2

ionic tries to load modal-template from your url ‘my-modeal-html’. this could be an absolute path to a template-file or you can create a template like:

 <script id="my-modal.html" type="text/ng-template">
  <ion-modal-view>
    <ion-header-bar>
      <h1 class="title">My Modal title</h1>
    </ion-header-bar>
    <ion-content>
      Hello!
   </ion-content>
  </ion-modal-view>
</script>

Then your url is the id.
After that you can give the modal an own scope or inject the parent (controller) scope to have stuff available you need in your modal.

After the modal is finally created → you are reaching the “then” - part of the code (it is a promise) and you can write you modal-object on your scope or make other stuff with it.

Everything is described here: $ionicModal - Service in module ionic - Ionic Framework

If you do not know what a scope is or how to work with sub-scopes → read angular tutorials about it.

3

i have read the documentation but not understand and still i am confused that why we use ionicmodal where we can use state to load template

4

you need no state… you need only a template file for the modal or you have like i posted a template defined and loaded via script-template

For examples: ionic has really good codepens:

1 Like
5

It is just like a prompt / pop up so what is difference between prompt and modal

6

Modal is a complete view “overlaying” the current view.

A “prompt” or “popup” is only a notification box with only short content like short texts or something like that.

7

okay i got thanks for your replies