Question

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

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

在我的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>

当我现在点击打开登录模式时，它工作正常，我可以在标签之间切换。但是当我尝试直接打开注册模式时，它只会打开登录窗口，我可以从此处切换到注册。

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

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

以角度模态切换模式

2 个答案: