How to pass data from parent controller to ionicModal?

ionic-v1
1

Hello,

I have following Demo where we start basic modal.

From angular ui we have ability to pass data to modal by using resolve key:

var modalInstance = $modal.open({
      templateUrl: 'myModalContent.html',
      controller: ModalInstanceCtrl,
      resolve: {
        test: function () {
          return 'test variable';
        }
      }
    });

How could we do the same with $ionicModal?

I opened ionic.bundle.js, seems we can’t. :frowning:

For sure I can store data in service and load it from modal.

Any suggestions?

Thanks,

1 Like
2

You can’t do that here because Modals are not routes or states in Ionic. However, you can give the modal access the original controller’s scope by passing in the scope parameter:

        $ionicModal.fromTemplateUrl('modal.html', function(modal) {
          $scope.modalCtrl = modal;
        }, {
          scope: $scope,  /// GIVE THE MODAL ACCESS TO PARENT SCOPE
          animation: 'slide-in-left',//'slide-left-right', 'slide-in-up', 'slide-right-left'
          focusFirstInput: true
        });

See sample : http://codepen.io/calendee/pen/LhJsK

5 Likes
3

Thank you, works fine.

4

FYI…$scope.modal should be replaced with $scope.modalCtrl in your codepen.

5

Right, this is working example. Thanks.

6

Hello, I am having the same question as this one. However I have some confusion about which is the “original controller’s scope”

In the child, should I access the parent controller using $scope.modal ??
(I tried, seems not working)

here are part of my codes

 $scope.productGroupsBtnTap = function () {
  	console.log('Product Groups Btn tap');
  	$ionicModal.fromTemplateUrl('templates/productGroup.html', function(modal) {
      modal.productGroups = product.productGroups;
      modal.id = 'ProductGroups';
      $scope.modal = modal;

      $scope.modal.show();
    }, {
      scope: $scope,
      animation: 'slide-in-up'
    });
  }

at the ProductGroup Controller

.controller('ProductGroupCtrl', function($scope, SharedProperties, $ionicModal) {
  console.log('Product Group controller');
  $scope.navTitle = SharedProperties.getProperty('navTitle');
  // $scope.navTitle = 'Return Policy';
  var option = $scope.modal.productGroups;
  // $scope.option = option;


  $scope.optionSelected = function($index) {
  	var selectedValue = option[$index];

  	$scope.modal.hide();
  }

});

Anyone has ideas which part goes wrong?

It throw an error of “productGroups of undefined”

Many Thanks

7

Just found that they are sharing the same "$scope"
very confusion but it does work.

8

This not work…sadly.
BTW, I found this link, this works fine: http://codepen.io/gnomeontherun/pen/crbtA?editors=101

9

I dont totally get it? whats the trick ? how they share ? is it because the controllers are not in the routes ? but on the view… does it do the trick ?

11