AngularJS 更改视图后页面冻结

Question

我在 AngularJS 中遇到问题，当我更改视图时它会将页面变成剪影 gray/black 并且整个页面被冻结或禁用。没有什么可以点击。您需要手动刷新它才能再次恢复正常。控制台中也没有错误日志。如何解决？

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 服务。 BS模态的传统方式在AngularJS中不是很方便的方式。然后在$uibModal的controller中注入$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();
    }

});

AngularJS 更改视图后页面冻结

AngularJS page freezes after changing view

views

angularjs