pass data from modal to parent

[Frank7390035]

Given this code invoked when a modal is closed:

modalInstance.scope.$on('modal.hidden', function(arg) {

});

how can I capture variables generated in the modal? Or how can I set a variable of a parent from a modal window?

Thank you,
Frank

[Serhii Kulibaba]

Hello Frank,

Please define global variables, based on the Modal on the index page: https://blog.appery.io/2015/09/how-to...

[Frank7390035]

Hi Serhii,

This is my code

==main page

modalInstance.scope.$on('modal.hidden', function(arg) {
alert($scope.pillFeature.value);
});

==modal page
$scope.pillFeature = pillFeature;
alert("scope " + $scope.pillFeature.value);
$scope.modal.hide();

===index page contains the global variable
pillFeature

• I can view the content of the global variable from the alert on the modal page - where this variable is set, but not on the alert from the main page. What am I doing wrong?

  Thank you

[Serhii Kulibaba]

Please set the child property on the pillFeature variable, e.g.:
pre$scope.pillFeature.value = "Test";/pre
instead of setting it's value directly

[Frank7390035]

Hi Serhii,

Thanks for your reply. I did more debugging: the page can read the variable value initialized in the index page, but it cannot read the value assigned within the modal...

And the modal cannot access the value assigned in the index. So the modal is where the problem resides. Is there any settings of the modal that might be causing this?

Thanks,
Frank

[Serhii Kulibaba]

1) Create a Modal like:

2) Define a scope variable "user", based on that Modal on the index page

3) Create a simple page to run the Modal and show the global variable "user" like:

4) Create a simple modal with the same struncture as a page above (to show the variable "user" and change it's property):

5) Open the Modal you've created from the page of your application with a JS code below:

prevar modalOptions = { // About Ionic Modal: https://links.appery.io/ve-snippet-modal-ionic
animation: 'slide-in-up', // The animation to show & hide with
focusFirstInput: false, // Whether to autofocus the first input of the modal when shown
backdropClickToClose: true, // Whether to close the modal on clicking the backdrop
hardwareBackButtonClose: true // Whether the modal can be closed using the hardware back button on Android and similar devices
};

Apperyio.get('Modals').loadModal("Modal1").then(
function(modalInstance) {
modalInstance.open(modalOptions).then(function(modal) {
modal.scope.modal = modal;
modal.scope.user = $scope.user;
modal.show();
});
},
function(error) {
console.log(error);
});
/pre

6) Run the application. You can change user's name on the page and see it's value on the Modal and backward (change user's address on the modal and see this value on the page)

[Frank7390035]

Thanks, with your instructions it works!

[Frank7390035]

Hi Serhii,

I run into a problem with another app that implements the solution above for passing data from the modal to a variable in the global scope.

The only difference with the case above is that the modal is invoked from the index page.

What should I do?

Thanks,
Frank