Angular material 在“角度材质”对话框中交换内容

我正在尝试使用角度材质创建登录/注册对话框。单击“切换”按钮时，对话框应在登录页面和注册页面之间切换

下面是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>

这是我试图实现的目标。

---

单击开关按钮。您会注意到内容发生了变化，但是如果您第二次单击“切换”按钮，对话框只会调整大小，如果您第三次单击它，对话框会切换回原来的大小。我正试图弄明白为什么只需点击一下按钮，它就无法在两个视图之间切换。

您的Plunk对我来说运行良好

我按

login

获得登录模式，然后按

register

模式变成register模式。如果我再按一次登录，我将获得登录模式

---

pd：我正在使用chrome。

我也在使用chrome，但现在我再次看到它，它正在工作。我的浏览器中一定有缓存的内容。ng消息不起作用。。。

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');
    };
  });