Switching between tabs in modal in angular

Question

I have a login and a signup form that opens in a modal. At the top I have two tabs switching between login and signup. see picture

Switching between the tabs works fine. However, I want the user to be able to choose login as well as signup on my actual page and open the modal directly in the right tab.

In my main.controller I have:

  $scope.openLoggerMenu=function(){

          $modal.open({
            templateUrl: 'app/account/loggingNavigation.html',

          })

        };

In my html menu I have:

  <div class="col-md-1 loginButtonLanding" ng-click="openLoggerMenu()">
    Login
  </div>
  <div class="col-md-1  loginButtonLanding" ng-click="openLoggerMenu()">
    Signup
  </div>

And finally the content of the modal looks like this:

<div class="container loginContainer">
  <div class="row">
    <div class="col-sm-4 col-sm-offset-2 col-xs-6 col-md-4 col-md-offset-2 loggingModal loggings" ng-click="showSignup=false; " ng-class="{'activeLogging':!showSignup}">
      Login
    </div>
    <div class="col-sm-4  col-xs-6 col-md-4  loggingModal loggings" ng-click="showSignup=true;" ng-class="{'activeLogging':showSignup}">
      Sign Up
    </div>
  </div>
  <login ng-show="!showSignup;"></login>
  <signup ng-show="showSignup;"></signup>
</div>

When I now click to open the login modal it works fine and I can swtich between the tabs. But when I try to open the signup modal directly it just opens the login window from where I can switch to sign up.

Any idea how to solve this?

Answer 1

Couple of options:

 <div class="col-md-1 loginButtonLanding" ng-click="openLoggerMenu(); showSignup=false;">
    Login
  </div>
  <div class="col-md-1  loginButtonLanding" ng-click="openLoggerMenu(); showSignup=true;">
    Signup
  </div>

Or you could put the logic inside openLoggerMenu() function by passing appropriate argument.

Answer 2

One solution would be to pass the scope to $modal.open(...) :

angular.module(...).controller(..., function($scope, $modal) {
    $scope.openLoggerMenu = function(showSignup){
        $scope.showSignup = showSignup;
        $modal.open({
             templateUrl: 'app/account/loggingNavigation.html',
             scope: $scope
        })
    };
});

<div class="col-md-1 loginButtonLanding" ng-click="openLoggerMenu(false)">
  Login
</div>
<div class="col-md-1  loginButtonLanding" ng-click="openLoggerMenu(true)">
  Signup
</div>

Refer to http://angular-ui.github.io/bootstrap/#/modal