在Angular Material Dialog中交換內容

Question

我正在嘗試使用Angular Material創建一個Login/Register對話框。當您點擊「切換」按鈕時，對話框應該在登錄頁面和註冊頁面之間切換。

下面是對話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'); 
    }; 
    }); 

這裏是什麼，我試圖完成一個plunker。 http://plnkr.co/edit/nLeJHZB9XiIiiR9fPNEe?p=preview

單擊開關按鈕。您會注意到內容會發生變化，但如果您再次單擊切換按鈕，對話框將僅調整大小，如果第三次單擊它，它將切換回來。我試圖弄清楚爲什麼只需單擊一下按鈕，它就不會在兩個視圖之間切換。

Answer 1

你的搶劫者對我來說工作得很好。

我按login，我得到登錄模態，然後我按01​​和模態變成寄存器模態。如果我再次按login我登錄模態。

pd：我正在使用chrome。