AngularJS頁面在更改視圖後會凍結

Question

我在AngularJS中遇到問題，當我將視圖變成silhoutte灰色/黑色並且整個頁面被凍結或禁用時。沒有什麼可以點擊的。你需要手動刷新它才能恢復正常。控制檯中也沒有錯誤日誌。如何解決它？

angular.module('myApp.loginController', []) 

.controller('LoginController', function($scope, $state) { 

    $scope.loginSubmit = function(){ 
     $state.go('customer_home'); 
    } 

    $scope.reset = function(){ 
     $scope.loginData = {}; 
    } 

}); 

main.html中

...some codes here... 
<button type="submit" class="btn btn-default" ng-click="loginSubmit()">Login</button> 
...some codes here... 

這裏是頁面的外觀時更改視圖後凍結

這裏是頁的手動刷新後的樣子

Answer 1

修復是使用$ uibModal服務。在AngularJS中，傳統的BS模式方式並不是一種方便的方式。然後在$ uibModal的控制器中注入$ uibModalInstance，然後使用close函數。要了解更多，這裏是服務的文件：http://angular-ui.github.io/bootstrap/#/modal

對不起，main.html代碼是BS模式的一部分，因爲起初我以爲它不會導致任何錯誤。

main.html中

...some codes here... 
<script type="text/ng-template" id="loginModal" ng-controller="LoginController"> 
    <div id="loginModalCont" class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" ng-click="close()">&times;</button> 
      <h4 class="modal-title">LOG IN</h4> 
     </div> 
     <form ng-model="loginData"> 
      <div class="modal-body"> 
       <div class="form-group"> 
        <label for="username">Username:</label> 
        <input type="username" class="form-control" id="username" ng-model="loginData.username"> 
       </div> 
       <div class="form-group"> 
        <label for="password">Password:</label> 
        <input type="password" class="form-control" id="password" ng-model="loginData.password"> 
       </div> 
       <div class="checkbox"> 
        <label><input type="checkbox"> Remember me</label> 
       </div> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" ng-click="loginSubmit()">Login</button> 
       <button type="button" class="btn btn-default" data-dismiss="modal" data-toggle="modal" data-target="#signupModal">Signup</button> 
       <button type="reset" class="btn btn-default" ng-click="reset()">Clear</button> 
      </div> 
     </form> 
    </div> 
</script> 

mainController.js

.controller('MainController', function($scope, $location, $anchorScroll, $uibModal) { 

    ...some codes here... 

    $scope.openModal = function(){ 
     var modalInstance = $uibModal.open({ 
      animation: true, 
      templateUrl: 'loginModal', 
      controller: 'LoginController' 
     }); 
    } 

}); 

loginController.js

.controller('LoginController', function($scope, $state, $uibModalInstance) { 

    $scope.loginSubmit = function(){ 
     $state.go('member_home'); 
     $uibModalInstance.close(); 
    } 

    $scope.reset = function(){ 
     $scope.loginData = {}; 
    } 

    $scope.close = function(){ 
     $uibModalInstance.close(); 
    } 

});