ionicModal $scope woes

ionic-v1
1

Please see pen here: http://codepen.io/anon/pen/xbjBvq

When you create a modal ala

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

It would seem that the modal’s scope would be bound to the scope passed in via the options object

scope: $scope

But this is not the case, it seems. I haven’t looked at the source but I’m guessing the scope is isolate and therefore I cannot reference anything on the $parent controller’s scope, even in angular expressions, thus, the modal template buttons don’t work either way (with $parent or without):

<button ng-click="ok()">OK</button>
<button ng-click="$parent.cancel()">Cancel</button>

This used to work (I think) – what changed or what am I doing wrong here?

2

Hello @zenocon,

Try doing this

here is the codepen with my changes http://codepen.io/anon/pen/myLYwJ

i noticed you had

<div class="modal" ng-controller="ModalCtrl">

meaning the modal has a separate controller from AppCtrl

what i did is this

app.controller('ModalCtrl', function($scope, $ionicModal) {
  $scope.ok = function () {
     alert('ok clicked');
     $scope.modal.hide();
  };
        
  $scope.cancel = function () {
    alert('cancel clicked');
    $scope.modal.hide();
  };
});

i hope i explained that well enough

Cheers

3

Thanks @cyprusglobe – I ended up resolving it too. I had forked a pen to create this, and I noticed some particular issues with it. I fixed it too: http://codepen.io/anon/pen/xbjBvq

The template wasn’t using <ion-modal-view> directive – that seemed to be the root of the issue. Also, there was a typo in the controller, where I was referencing modal.hide() instead of $scope.modal.hide() – the significant issue seemed to be the lack of <ion-modal-view> directive. If you use this, and pass the controller’s scope, then you don’t need to define a separate controller for the modal.

4

glad to here you got it fixed :smile: