In the modal example it mentions that instead of using inline, you can include a template.
My current “bad” code for a modal is very WET if i want the same modal available throughout my app
<script id="seemingly-arbitrary-name.html" type=text/ng-template">
your html content here copy/pasted for each view you want the modal on currently
</script>
I’d prefer to include it via my-modal-template.html so that i can just call it on any view without having to repeat the code; but i can’t figure it out and the example failed to provide an example.
So the code examples look identical to what I have (except for $scope.newExerciseModal) which doesn’t seem to have any change.
As soon as I remove the <script id="modal.html" type="text/ng-template"> from the view, it doesn’t work. I have a separate page called “modal.html” that contains what would have been inside the <script> tags
.controller('modal', function($scope, $ionicModal) {
// Load the modal from the given template URL
$ionicModal.fromTemplateUrl('modal.html', function(modal) { $scope.modal = modal; },
{
// Use our scope for the scope of the modal to keep it simple
scope: $scope,
// The animation we want to use for the modal entrance
animation: 'slide-in-up'
});
$scope.openModal = function() {
$scope.modal.show();
};
$scope.closeModal = function() {
$scope.modal.hide();
};
})
My NON-working view (trying to use external template modal.html):
Where the working view will require me to copy/paste the code for each view I want to have the modal (if i needed to edit a spelling error, id have to edit multiple instances)
As best I can understand, you have a view file with the modal template inside it.
If so, you need to put the <script id="modal.html" type="text/ng-template"> template in it’s own file. You can put in your index.html file. Then, any controller that needs that modal can reference it.
If that doesn’t do the trick, can you make a Codepen sample so we can see what’s wrong?
@Calendee I too have a similar question here. As per your example I have added my-modal.html script within Index.html and it is working fine #fiddle1
Now I am trying to keep it within an template my-modal.html like I mentioned in my question and here the my-modal.html not working #fiddle2
As per the error in console, I can understand that I missing to point the $scope and therefore it is not working. But I am unable to fix it up. Please let me know your suggestions.
The problem simply seems to be with timing. I changed the timeout on the second example to 100ms and it worked fine. I imagine it has to do with the quality of the connection to the Plunker servers. I don’t know why the first loads so well. I can’t see any difference in the code at all.
Keep in mind that on a device, the entire HTML will be packaged and served locally; so, I don’t think you will have this problem.
Ok…I also encountered this issue. This comes because we are just including the template to a DIV which is supposed to be the only way and DIV are by default shown. So just hide it. OR use ng-hide class.
Has there been any update to this? I am having the same problem as @praveen. Loading a modal from an external template is not working at all. It is doable if I include the modal code inside a script tag inside the .html file. Also FYI, I am doing this in an integrated meteor-ionic-angular app, but I don’t think that should change anything as every other ionic component is working correctly.
Modals from template URLs ($ionicModal.fromTemplateUrl) (rather than inline) work pretty well across the board. So, I don’t know exactly what problem you’re having. I frequently have a completely separate “myModal.html” file in my app - rather than inline scripts.
Do you have a Codepen or Ionic Playground sample that demonstrates the problem? Or can you post the modal code here and the call to $ionicModal?
I realized what the problem was because my code was organized in a file structure with meteor. I had to create a separate /modals directory to save my custom modals. I describe my problem and solution here: https://github.com/Urigo/meteor-angular-socially/issues/28