Animation lost when Modal moved into include file

ionic-v1
1

I created a Modal view inline in my index.html file, and it works well with a nice slide-up display. So far, so good.

Then I moved the modal view into a separate file, and used a div include in the index.html file to reference it. The modal still appears, but not with the slide-up animation.

What can I do to keep my code organized with a separate modal file, without losing that animation?

Here is what the code looks like now (with no animation) in my index.html file:

 <body ng-app="your_app_name">
    <ion-nav-view></ion-nav-view>
    <script id="modal-script.html" type="text/ng-template">
        <div ng-include="'views/modal.html'"></div>
    </script>
  </body>
2

Record time for answering a question by myself! It just came to me…

This solved the animation issue for me: move the “ion-modal-view” out of the separate modal file and into the index.html file to wrap the include. Like this

<body ng-app="your_app_name">
   <ion-nav-view></ion-nav-view>    
   <script id="modal-script.html" type="text/ng-template">
     <ion-modal-view ng-controller="MyModalController">
       <div ng-include="'views/modal.html'"></div>
     </ion-modal-view>
   </script>
</body>

Hope this helps someone else out there!