How to pass data from $ionicModal to main controller?

ionic-v1
1

Hello,

I have following example in [CodePan][1] where I try to change the email over modal.

As I know $ionicModal has the same scope. However I can pass data to modal but when I press “Apply” - nothing happens.

I tried so far to add watcher but with no success:

  $scope.email = 'old'; 
    
    $scope.$watch('email', function(newV, oldV){
        if(newV !== oldV){
            $scope.email = newV;
        }
    });

and:

$scope.applyModal = function(newValue) {             
          console.log('1: ' +  $scope.email);
          $scope.email = newValue;
           console.log('2: ' +  $scope.email);  
          $scope.modalCtrl.hide();  // we see new value
        };

On press “Apply”

Do I miss something?

Thanks,
[1]: http://codepen.io/anon/pen/yhKqu/

2

Modals actually have an isolated scope. I have had similar issues with modals, and there seem to be two ways to deal with it.

  1. Pass the value back to the parent model, applyModel(email) would pass the email value in the model scope to the method to be used to pass along.
  2. Use a second level object that can be better shared $scope.model.email.
1 Like
3

This is a point. The modal in native Angular has isolate scope and we use promise to get response back. In our case I really don’t see any solution to pass value to parent scope. The parent scope has different id from where I called the modal.

Can you change my demo I posted?

It will work (at least for me) only if modal will stay with the same scope (actually this is what I did but it seems messy).

Thanks,

4

I just modified your example using the two methods above.

  1. http://codepen.io/gnomeontherun/pen/crbtA?editors=101
  2. http://codepen.io/gnomeontherun/pen/xtFnf/?editors=101

The first lets you maintain the isolated scope. In both examples the model in the main controller is changed to $scope.modalData.msg.

While the scopes are different between the modal and controller, the modal is a child and so the parent values are available (See Scope Hierarchies). What I haven’t dug into is why putting a string model directly on the scope fails ($scope.msg) but having it as an object seems to work ($scope.modalData.msg).

6 Likes
5

Thank you, very appreciate your effort

6

In my case… I could update the data from cannot be bind on the main view… is there something wrong with my code ?
Main Controller

$ionicModal.fromTemplateUrl('post-modal.html', {
        scope: $scope,
        animation: 'slide-in-up'
    }).then(function (modal) {
        $scope.modal = modal;
    });

Modal Controller
$scope.save = function () { console.info('Save'); $scope.announcements.push( { id: $scope.announcements.length+1, name: 'April Marie Bandivas', content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa nobis ullam, aliquam illum reiciendis velit architecto a quisquam, perspiciatis eum excepturi delectus optio. Labore, inventore fuga, itaque molestiae ex dignissimos.', files: [ { id: 1, file: 'sansa-snowcastle.png', type: 'image', } ], avatar: 'tyrion.jpg', comments: 120, time: 'Just now' } ); $scope.modal.hide(); console.info($scope.announcements); };

the code was successfuly executed and updated the $scope.announcement from the main controller… however it wont display the new data on the view…