在 Angular Material 对话框中交换内容

Question

我正在尝试使用 Angular Material 创建一个 Login/Register 对话框。单击 'Switch' 按钮时，对话框应在登录页面和注册页面之间切换。

这是对话框html

<md-dialog>
  <md-dialog-content>
    <div ng-if="lc.show_form == 'login'">
      <form name="loginForm" ng-submit="loginForm.$valid && lc.login()" novalidate>
        <md-input-container>
          <label>Email</label>
          <input type="email" name="email" required ng-model="project.email">

          <div ng-messages="loginForm.email.$error" ng-if="loginForm.email.$dirty">
            <div ng-message="required">This is required.</div>
          </div>
        </md-input-container>
        <md-input-container>
          <label>Password</label>
          <input type="password" name="password" required ng-model="project.password">

          <div ng-messages="loginForm.password.$error" ng-if="loginForm.password.$dirty">
            <div ng-message="required">This is required.</div>
          </div>
        </md-input-container>

        <md-button ng-click="lc.login()" class="md-raised md-primary">Login</md-button>
        <md-button ng-click="lc.showRegister()">Switch</md-button>
      </form>
    </div>
    <div ng-if="lc.show_form == 'register'">
      <form name="registerForm" ng-submit="registerForm.$valid && lc.register()" novalidate>
        <md-input-container>
          <label>Email</label>
          <input type="email" name="email" required ng-model="project.email">

          <div ng-messages="loginForm.email.$error" ng-if="loginForm.email.$dirty">
            <div ng-message="required">This is required.</div>
          </div>
        </md-input-container>
        <md-input-container>
          <label>Password</label>
          <input type="password" name="password" required ng-model="project.password">

          <div ng-messages="loginForm.password.$error" ng-if="loginForm.password.$dirty">
            <div ng-message="required">This is required.</div>
          </div>
        </md-input-container>
        <md-input-container>
          <label>Password Confirm</label>
          <input type="password_confirm" name="password_confirm" required ng-model="project.password_confirm">

          <div ng-messages="loginForm.password_confirm.$error" ng-if="loginForm.password_confirm.$dirty">
            <div ng-message="required">This is required.</div>
          </div>
        </md-input-container>

        <md-button ng-click="lc.register()" class="md-raised md-primary">Register</md-button>
        <md-button ng-click="lc.showLogin()">Switch</md-button>
      </form>
    </div>
  </md-dialog-content>
</md-dialog>

这里是控制器代码

angular.module('dialogDemo', ['ngMaterial'])
  .controller('AppCtrl', function($mdDialog, $log) {

            $mdDialog.show({
                controller: 'dialogCtrl',
                controllerAs: 'lc',
                templateUrl: 'loginDialog.tmpl.html'
            });

  })
  .controller('dialogCtrl', function($scope, $log) {
    var self = this;
    self.show_form = 'login';

    self.showRegister = function() {
      self.show_form = 'register';
      console.log('show register');
    };

    self.showLogin = function() {
      self.show_form = 'login';
      console.log('show login');
    };
  });

这是我要完成的任务的一部分。 http://plnkr.co/edit/nLeJHZB9XiIiiR9fPNEe?p=preview

点击切换按钮。您会注意到内容发生了变化，但是如果您第二次单击切换按钮，对话框只会调整大小，如果您第三次单击它，它会切换回来。我想弄清楚为什么它不能通过单击按钮在两个视图之间切换。

Answer 1

你的 plunker 很适合我。

我按 login 得到登录模态，然后我按 register 模态变成注册模态。如果我再次按 login，我将获得登录模式。

pd：我正在使用 chrome。

在 Angular Material 对话框中交换内容

Swapping content in Angular Material Dialog

angular-material