Using a Modal from its own template file

ionic-v1
1

I am having trouble using modals from the template file. The doc states ‘If it is in its own template file, remove the script tags and call it by file name.’

I have removed the script tags and and placed the scipt in its own file named my-modal.html.

What do I change to:

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
});
});

Any help greatly appreciated.

Fred

2

you need to set the fullpath to your template like

templates/my-modal.html

it depends where your files are stored in the www-dir

3

So if my modal .html was simply in:

myApp/www/templates/my-modal.html

changing:
$ionicModal.fromTemplateUrl(‘my-modal.html’, {

to:
$ionicModal.fromTemplateUrl(‘templates/my-modal.html’, {

Should work yes?

4

yarp! should work :wink:

1 Like