Modal closing and staying on page after closing

ionic-v1
1

I have a question about the tab demo.

I’ve added a modal to one of the tabs but don’t understand how to return to the tab/page.html once I close the modal.

I’m assuming this is a $scope issue but not really understanding Angular very well I thought maybe someone could point me in the right direction?

Basically in tab-acccount.html, open modal from <script>...</script> inside tab-account.html, modal goes to modal from tab-dashboard.html, etc.

Bad description but hope it lends some insight into my challenge.

Thank you,
Dan

2

Can you share some of your code? How are you opening and closing the modal? Modals slide on top of the current view, so opening it and closing it shouldn’t move you to another view.

3

Chris,

I was going to send over the WWW directory so you can just, build and ionic serve and see the site but it was too big to email, don’t want to share with the world so do you have someplace I can send a 2.6mb zipped file?

Basically the Actors and Project tabs are live and it opens to the Actors tab.

Click on the “hamburger” on Actors to open the popdown (sorry said modal earlier) and then close it.

Then go to Projects and do the same…it routes back to the Actors page and never opens the Projects popdown which has different content.

This is an old archive since I’ve moved on to just building out the Actors tab but any insight would be great.

I know in the back of my head that I should be doing this all on one page anyhow but don’t have the Angular chops to manipulate things yet.

I’m SOOOO looking forward to seeing Ionic Creator, it’s perfect for what I do!

Thanks,

P.S. The latest version is up on http://ipadoracle.com/testbed the hamburger is live, as well as text expansion arrows, and the “+” sign on the Scenes to open a modal but the other tabs are dead till I finish with Actors.

4

well I wouldn’t really have time to build it, go through it, etc, anyway, can you just paste how you set up your modal?

5

Basically this is the tab-actor.html code seg for the popdown, then I did the same for tab-projects.html changing the ActorAddModalCtrl to ProjectAddModalCtrl.

The issue I see is that the popdown isn’t really in the controller just changing the display: open to none and block.

Maybe since I have ng-controller=“ActorAddModalCtrl” in the main div it’s taking over every time when the page loads? If that’s the case I’m confused how to do unique popdowns for each tab page unless I have to have a separate controller or set of controllers for every page which seems wasteful.

I’m sure there is a way to set the $scope somehow but I haven’t quite got that far yet…(sigh)

Thanks for your assistance Chris!

<ion-view title="Actors" scroll="true"> <ion-content class="has-header padding responsive-sm" ng-controller="ActorAddModalCtrl"> <div ng-show="collapsedActors"> <div class="row"> <div class="col col-25 center_thumbnail"> <img alt="" class="thumbnailRound" src="img/tumbleton_150x150.jpg"> <p style="text-align:center;">Tumbleton T.</p> </div> <div class="col col-25 center_thumbnail"> <img alt="" class="thumbnailRound" src="img/pete_150x150.jpg"> <p style="text-align:center;">Pete</p> </div> <div class="col col-25 center_thumbnail"> <img alt="" class="thumbnailRound" src="img/brakenton_150x150.jpg"> <p style="text-align:center;">Brakenton</p> </div> <div class="col col-25 center_thumbnail" ng-click="OpenActorAddModal()"> <img alt="" class="thumbnailRound" src="http://placehold.it/150x150"> <p style="text-align:center;">ADD ACTOR</p> </div> </div> </div> <hr> <div class="ion-content responsive-sm" style="align-items: center"> <h1 class="h1_centered ">Tumbleton T. v.01</h1> <p class="p_centered ">Tumbleton T. a rhino in a suit with a monocle</p> <hr> </div> <a href="#" ng-model="collapsedActors " ng-click="collapsedActors=!collapsedActors " class="button button-icon icon ion-drag button-block "></a>

6

If you have routes set up using the $stateProvider, you typically won’t need to use ng-controller since the controller can be set with the routes, ie, a snippet from my routes:

.state('tab.map', {
url: '/map',
views: {
	'tab-map': {
		templateUrl: 'templates/tab-map.html',
		controller: 'MapCtrl'
	}
}
})

I see where you have an ng-click set to trigger the modal, but what I’m more interested in is the modal code itself, your openActorAddModal() method

7

` `

8

That’s your modal template, what about the openActorAddModal() method which actually opens the modal?

9

Chris,

I think I’m going to punt on this and do it a different way as I think I’ve confused the modal and the popdown which is just a display:block/none.
Appreciate the help and look forward to the Ionic Creator!
Thanks again, Dan