Modal for login - didn't use controller always

ionic-v1
1

Hey guys,

I use the backand-app from ionic market.
Now i try to have the login as a modal. On standard i have a login-tab, where user could do the login. But this is not really nice, so i want to do it with a modal and remove the login-tab.

So i got the following structure:
4 tabs:

  • *dashboard *(with a button to open the modal)
  • objects (with a button to open the modal)
  • login (with a button to open the modal)
  • signup

And now the problem:
The modal opens on every site, when i click the button. But it only uses the controller, when i open it on site/tab login. When i open the modal on dashboard or objects, it didn’t use the controller and the buttons in the modal for login (for example social login for facebook) do nothing.
I think it is a controller problem.

I uploaded the files to git:
https://github.com/AndreDriesel/ionic-backand-app

Do you have any idea why it doesn’t work?

2

because you define the modal content in your index.html (so for all states).
But only the login-tab state is connected with the login controller, where your modal is built and connected to the the scope of the login-tab --> if you want to access the login modal you should move the modal creation and modal functions in an own controller and add this controller in the modal-template via ng-controller, or put everything in an base controller
 which is around all other states.

1 Like
3

Thanks for the fast reply!

Okay so i got two oppurtunities:

  1. put ng-controller=“loginCtrl” in < body>
  2. put ng-controller=“loginCtrl” in modal template
  1. base controller in < body> will firing in every site/state, right?
  2. where do i have to add ng-controller?

< script id=“contact-modal.html” type=“text/ng-template” ng-controller=“loginCtrl”>
< div class=“modal” >
< ion-header-bar>


Is this right?

4

nope you should put it on the tag -->
http://ionicframework.com/docs/api/service/$ionicModal/

1 Like
5

I really see no difference between the ionic example code from the docs and my code on git. :confused:

Where have they added the controller in the docs example?

6

in the docs —> the modal is created in a controller --> and the modal gets the scope of the controller. This scope holds all methods and functionalities the modal needs.

In your case all you functionality of the login-tab-view is in the login-tab-controller. You need to create your modal somewhere ‘globally’ like in a base controller. There you can put all the functionality of your tabs-login controller OR you can add the login-tab-controller to your modal manually (it will get an isolated scope) with ngController.

1 Like
7

In theory I understand what you mean, but I fail in the field.
I have tried to put my script in the index.html into a < div ng-controller=“LoginCtrl”> , but this doesn’t work.
And i have searched for some code snippets and tutorials for global controllers or social login modals, but didn’t really found some useful sites.
Do you know any snippets or tutorial, which could help me solving this problem?

8

Please create a codepen with your current code.
I will look into it and change it.

1 Like
10

first i would thank you for your help :smile:

here is the code on codeine: (woohoo, my first pen)
Codepen - modal example

Everything works fine.
I just got one question:

I open the Modal with a global Controller. Is it possible the have an separate Controller for the controller itself? So open with GlobalCtrl, but functions from ModalCtlr?