Angular / modal /ngDialog - How to have multiple controller in a modal with nested / multiples states / views?

Question

I used ngDialog and have a modal with nested views. Insight my modal I am switching between signup (state) and login (login) so I need to include controller for signup and one for login. I have been searching for a solution for hours everywhere but couldn't find anything. Does anyone how I can do that? In case somebody knows a solution NOT for ngDialog but for $modal, please let me know too. Thanks!!

    $scope.clickToOpen = function () {
       ngDialog.open({ 
          template: 'js/modal/modal.html',
          controller: 'SignupCtrl',
       });
    };

In the code above- everything works find for signup because I included its controller, but not for Login as I don't know how to include logins controller. Also, if its important, I will include more code-just thought it doesn't matter for my question.

What I also tried is this:

app.config(function ($stateProvider) {

   $stateProvider.state('activity.modal', {
     url: 'modal',
     templateUrl: 'js/modal/modal.html',
     views: {
      'loginView@': {
        templateUrl: 'js/login/login.html',
        controller:'LoginCtrl'
      },

      'signupView@': {
        templateUrl: 'js/signup/signup.html',
        controller:'SignupCtrl'
      }
     }
    });

});

but that doesn't work neither for login nor for signup.

Answer 1

There are multiple solutions to this problem. Some of them are better than others, but at the end of the day, it depends on what kind of UI/UX you are looking for.

One Dialog with Merged Controllers (arguably the worst approach)

You can use only one dialog with one template, but you have to merge the controllers together so the new controller can handle both login and sign up logic.

Two Different Dialogs

You can open different ngDialog pop-ups - one for login a different one for sign up. These would be triggered by different buttons in your view.

For example having two buttons (Login and Sign Up) where the Login button would show the Login dialog and the Sign Up button the Sign Up dialog.

Use Components in Your Dialog (arguably the best approach)

You can open one ngDialog instance and in the template, you could use two different components - one for login and one for sign up. Each component would have its own separate template and controller and thus the rule of separation of concerns still applies.

The added benefit of the last approach is that you can then use these components anywhere on your website - not just the ngDialog template.