Double Modal Issue

ionic-v1
1

Hi,

I have a modal in a view. In this modal, I’m opening another modal for some value selection. But when the second modal closes, the first one also closes. Is this a known issue?

Thanks

2

Hey @arlbozoluk, sounds like the modals are sharing the same scope. Did you try specifying two controllers, one for each modal?

3

Hi,

I am not able to find any modal examples with their own controllers. Every example sets scope to the current scope for simplicity. And nothing about it in the documentation either.

Can you guide me a bit :smile:

4

Desperate for a help :smile:

5

Hey @arlbozoluk, try this:

    Modal.fromTemplateUrl('modal.html', function(modal) {
      $scope.modal = modal;
    }, {});

Then the modal will use a new scope. You can set your own controller on the modal like this:

<script id="modal.html" type="text/ng-template">
  <div class="modal" ng-controller="ModalCtrl">
    <header class="bar bar-header bar-positive">
      <h1 class="title">New Contact</h1>
      <button class="button button-clear button-primary" ng-click="close()">Cancel</button>
    </header>
    <content has-header="true">
    </content>
  </div>
</script>

Then in the controller for that:

  .controller('ModalCtrl', function($scope) {
    $scope.close = function() {
      $scope.modal.hide();
    }
  });

Does that help?

6

Hi Max,

Thanks for your suggestion. The problem with this approach is, when I define Modal Contoller like in the example, it is created when the root controller defines the modal. But what I want to create the modal controller when I call the modal and also I want to inject some parameters at that point.

Let’s say I have a list of products and my edit window is my modal. When user clicks edit on the product list, I want to create the modal controller and I want to inject the selected product into modal controller. This is the same approach that I use in my web angular projects with ui-boostrap module in angular-ui which can be found [here][1]

Can I do this? Or will this need a new implemetation over modal? I’m happy to dig into the ionic code and create PR.

Thanks
Arıl
[1]: http://angular-ui.github.io/bootstrap/

7

I see, you want a dynamic controller for the modal. I think what would be more Angular-like would be to have one controller that you pass data to.

I just made this plunker as an example, does this help at all: http://plnkr.co/edit/dODT1i?p=preview

We are passing a new item to the modal each time, but we reuse the modal and the modal controller which is faster and uses less resources:

Make sure you are running the new ionic in master to use this feature in your own code.

8

Hi Max,

I tried your solution. It works like a charm but(yeah but :smile:) the main problem is still there. Double modal issue… So I have a controller which calls the first modal, first modal has its own controller. And the first modal calls the second modal which is also has its own controller. But when I call $scope.modal.hide() from second modal, both modals closes :frowning:

9

Hi again,

Allright, I found the problem. I have got a form in my first modal and it has a submit function which also saves and closes the modal. When I open the second modal from the first one, form tries to submit and closes the corresponding modal.

I don’t know if this is a bug or not :smile:

10

Glad you figured it out. My guess is it’s an overlap in scope or something like that. Probably just a nuance of Angular :slight_smile: