在 angular 模式下的选项卡之间切换

Question

我有一个登录名和一个以模式打开的注册表单。在顶部，我有两个选项卡在登录和注册之间切换。见图

标签之间的切换工作正常。但是，我希望用户能够在我的实际页面上选择登录和注册，并直接在右侧选项卡中打开模式。

在我的 main.controller 我有：

  $scope.openLoggerMenu=function(){

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

          })

        };

在我的 html 菜单中我有：

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

最后模态框的内容是这样的：

<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>

当我现在点击打开登录模式时，它工作正常，我可以在选项卡之间切换。但是当我尝试直接打开注册模式时，它只会打开登录 window，我可以从那里切换到注册。

知道如何解决这个问题吗？

Answer 1

几个选项：

 <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>

或者您可以通过传递适当的参数将逻辑放入 openLoggerMenu() 函数中。

Answer 2

一个解决方案是将作用域传递给 $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>

参考http://angular-ui.github.io/bootstrap/#/modal

在 angular 模式下的选项卡之间切换

Switching between tabs in modal in angular

twitter-bootstrap

angularjs

angularjs-scope

bootstrap-modal

angularjs-ng-click