AngularJS控制器成功，window.location没有关闭模态或刷新页面

Question

我希望当前页面在我提交表单后刷新并关闭模式...我想我通过在URL的末尾添加一个更改变量来刷新它，但是模态＆＃39;灰色的＆＃39;屏幕的一个方面不会消失......对于那个主页，浏览器中的网址不会改变。 console.log显示我获得了成功＆＃39; - 有什么想法吗？

我的控制器看起来像这样

$scope.addChild = function() {
    var pid = $scope.child.parent_id;
    $http.post('/api/child/', $scope.child)
    .success(function(response) {
        window.location.href='#/parent/details/'+pid+'?dt='+getTime();
    });
}

每个请求 - 这是完整的代码......

app.js

var myApp = angular.module('myApp',['ngRoute']);

/* --------------------------------------------
    ROUTES
 --------------------------------------------*/
myApp.config(function($routeProvider) {

    $routeProvider
    .when('/', {
        templateUrl: 'views/dashboard.html'
    })
    // parents
        .when('/parents', {
            controller:'ParentController',
            templateUrl: 'views/parents.html'
        })
        .when('/parents/details/:id',{
            controller:'ParentController',
            templateUrl: 'views/parent_detail.html'
        })
        .when('/parents/add',{
            controller:'ParentController',
            templateUrl: 'views/parent_add.html'
        })
        .when('/parents/edit/:id',{
            controller:'ParentController',
            templateUrl: 'views/parent_edit.html'
        })
    // childs
        .when('/childs', {
            controller:'ChildController',
            templateUrl: 'views/childs.html'
        })
        .when('/childs/details/:id',{
            controller:'ChildController',
            templateUrl: 'views/child_detail.html'
        })
        .when('/childs/add',{
            controller:'ChildController',
            templateUrl: 'views/child_add.html'
        })
        .when('/childs/edit/:id',{
            controller:'ChildController',
            templateUrl: 'views/child_edit.html'
        })
    // catch-all
    .otherwise({
        redirectTo: '/'
    });

});

ChildController.js

var myApp = angular.module('myApp');

myApp.controller('ChildController', ['$scope', '$http', '$location', '$routeParams', function($scope, $http, $location, $routeParams) {
    console.log('Child Controller called...');
    $scope.loading = false;


    $('#parentAddChildModal').on('hidden.bs.modal', function(){
        var modalParentId = $scope.child.parent_id;
        $location.url("parents/details/"+modalParentId);
    })



    $scope.getChilds = function() { console.log('getChilds called...');
        $scope.loading = true;
        $http.get('/api/child')
        .success(function(response) {
            $scope.childs = response;
            $scope.loading = false;
        });
    }

    $scope.setChildWithParentId = function(oid) { console.log('setChildWithParentId called...w/'+$routeParams.id);
        $scope.child = {
            parent_id: $routeParams.id
            ,name: ''
            ,username: ''
            ,email: ''
            ,password: ''
            ,address: {}
            ,phone: ''
        };
    }

    $scope.getChild = function() { console.log('getChild called...');
        var id = $routeParams.id;console.log('gonna get /api/childs/'+id);
        $http.get('/api/child/'+id)
        .success(function(response) {console.log('getChild response...'+id+'->'+response);
            $scope.child = response;
        });
    }

    $scope.addChild = function() { console.log('addChild called...');
        console.log($scope.child);
        $http.post('/api/child/', $scope.child)
        .success(function(response) {
            window.location.href='#/childs';
        });
    }

    $scope.addChildWithParent = function() { console.log('addChildWithParent called...');
        console.log($scope.child);
        var oid = $scope.child.parent_id;
        $http.post('/api/child/', $scope.child)
        .success(function(response) {console.log('addChildWithParent called...Success:'+oid);
             $('#parentAddChildModal').modal('hide');
        });
    }

    $scope.updateChild = function() { console.log('updateChild called...');
        var id = $routeParams.id;
        $http.put('/api/child/'+id, $scope.child)
        .success(function(response) {
            window.location.href='#/childs';
        });
    }

    $scope.removeChild = function(id) { console.log('removeChild called...');
        $http.delete('/api/child/'+id)
        .success(function(response) {
            window.location.href='#/childs';
        });
    }

    $scope.getParents = function() { console.log('getParents called...');
        $http.get('/api/parent')
        .success(function(response) {
            $scope.parents = response;
        });
    }

    $scope.getInstruments = function() { console.log('getInstruments called...');
        $http.get('/api/instrument')
        .success(function(response) {
            $scope.instruments = response;
        });
    }

    console.log('Child Controller loaded...');

}]);

的index.html

<html ng-app="myApp" >

<head>

    <title>myApp - DEV</title>

    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css" >
    <link rel="stylesheet" href="css/style.css" >

</head>

<body>

    <nav class="navbar navbar-default" >
        <div class="container" >
            <div class="navbar-header" >
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" >
                    <span class="sr-only" >Toggle navigation</span>
                    <span class="icon-bar" ></span>
                    <span class="icon-bar" ></span>
                    <span class="icon-bar" ></span>
                </button>
                <a class="navbar-brand" href="#/" >myApp - DEV</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse" >
                <ul class="nav navbar-nav navbar-right" >
                    <li><a href="#/childs" >Childs</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right" >
                    <li><a href="#/parents" >Parents</a></li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </nav>

    <div class="container" >
        <div class="row" >
            <div class="col-md-12" >
                <div ng-view></div>
            </div>
        </div>
    </div>
    <!-- /.container -->

    <script src="lib/angular/angular.js" ></script>
    <script src="lib/angular-route/angular-route.js" ></script>
    <script src="lib/jquery/dist/jquery.js" ></script>
    <script src="lib/bootstrap/dist/js/bootstrap.js" ></script>
    <script src="lib/ui-bootstrap-tpls-2.5.0.min.js" ></script>

    <script src="/app.js" ></script>

    <script src="/controllers/parent.js" ></script>
    <script src="/controllers/child.js" ></script>


</body>
</html>

parent_detail.html

<a href="#/parents" >Go Back</a>
<div class="panel panel-default" ng-init="getParent()" >
    <div class="panel-heading" >
        <h3 class="panel-title" >
            {{parent.name}}
            <div class="pull-right" >
                <a href="#/parents/edit/{{parent._id}}" >Edit</a> | <a href="#" ng-click="removeParent(parent._id)" >Delete</a>
            </div>
        </h3>
    </div>
    <div class="panel-body" >
        <div class="row" >

            <div class="col-md-4" >
                <p>Account Info</p>
                <ul class="list-group" >
                    <li class="list-group-item" >Username: {{parent.username}}</li>
                    <li class="list-group-item" >Email: {{parent.email}}</li>
                    <li class="list-group-item" >&nbsp;</li>
                </ul>
            </div>

            <div class="col-md-4" >
                <p>Childs
                    <span class="pull-right"  style="padding-right: 25px">
                        <button class="btn btn-primary btn-xs" data-toggle="modal" data-target="#parentAddChildModal">
                            Add Child
                        </button>
                    </span>
                </p>
            </div>

        </div>
    </div>
</div>

<!-- Modal -->
<div class="modal fade" id="parentAddChildModal" tabindex="-1" role="dialog">

    <div class="modal-dialog modal-lg">

        <div class="modal-content" ng-controller="ChildController" ng-init="setChildWithParentId()" >

            <form ng-submit="addChildWithParent()" >

            <!-- Modal Header -->
            <div class="modal-header" >
                <button type="button" class="close" data-dismiss="modal" >
                    <span aria-hidden="true" >&times;</span>
                    <span class="sr-only" >Close</span>
                </button>
                <h4 class="modal-title" id="parentAddChild" >
                    Add Child
                </h4>
            </div>

            <!-- Modal Body -->
            <div class="modal-body" >

                <div class="form-group has-error" >
                    <label>Parent ID:</label>
                    <input type="text" class="form-control input-sm disabled " ng-model="child.parent_id" >
                </div>
                <div class="form-group has-error" >
                    <label>Name:*</label>
                    <input type="text" class="form-control input-sm" ng-model="child.name" placeholder="Name" >
                </div>
                <div class="form-group has-error" >
                    <label>Email:*</label>
                    <input type="text" class="form-control input-sm" ng-model="child.email" placeholder="Email" >
                </div>
            </div>

            <!-- Modal Footer -->
            <div class="modal-footer" >
                <button type="button" class="btn btn-default" data-dismiss="modal" > Close </button>
                <button type="submit" class="btn btn-primary" >Submit</button>
            </div>

            </form>

        </div>

    </div>

</div>

编辑以反映当前状态 - 仍未关闭模态

Answer 1

如果您使用window.location.href重定向，则不会让角度路由器了解位置更改。因此，最终消化周期不会运行，应用程序状态也不会发生变化。

考虑使用$location.path在SPA中导航。调用path方法将让路由器知道应用程序路由已更改，最后它会正确更新状态。

//First close the modal|
$(modal).hide();
$location.path('#/parent/details/'+pid+'?dt='+getTime());

Answer 2

更改您的控制器

myApp.controller('ChildController', ['$scope', '$http', '$location', '$routeParams', function($scope, $http, $location, $routeParams) {
    console.log('Child Controller called...');
    $scope.loading = false;


$('#parentAddChildModal').on('hidden.bs.modal', function(){
    var modalParentId = $scope.child.parent_id;
    $location.url("parents/details/"+modalParentId);
})

$scope.getChilds = function() { console.log('getChilds called...');
    $scope.loading = true;
    $http.get('/api/child')
    .success(function(response) {
        $scope.childs = response;
        $scope.loading = false;
    });
}

$scope.setChildWithParentId = function(oid) { console.log('setChildWithParentId called...w/'+$routeParams.id);
    $scope.child = {
        parent_id: $routeParams.id
        ,name: ''
        ,username: ''
        ,email: ''
        ,password: ''
        ,address: {}
        ,phone: ''
    };
}

$scope.getChild = function() { console.log('getChild called...');
    var id = $routeParams.id;console.log('gonna get /api/childs/'+id);
    $http.get('/api/child/'+id)
    .success(function(response) {console.log('getChild response...'+id+'->'+response);
        $scope.child = response;
    });
}

$scope.addChild = function() { console.log('addChild called...');
    console.log($scope.child);
    $http.post('/api/child/', $scope.child)
    .success(function(response) {
        $('#parentAddChildModal').modal('hide');
    });
}

$scope.addChildWithParent = function() { console.log('addChildWithParent called...');
    console.log($scope.child);
    var oid = $scope.child.parent_id;
    $http.post('/api/child/', $scope.child)
    .success(function(response) {console.log('addChildWithParent called...Success:'+oid);
        //window.location.href='#/parents/details/'+oid+'?dt='+getTime();
        //$location.url('/#/parents/details/'+oid);
        //$route.reload();
    });
    $('#parentAddChildModal').on('hidden.bs.modal', function(){
       $location.url('parents/details/'+oid);
    })
}

$scope.updateChild = function() { console.log('updateChild called...');
    var id = $routeParams.id;
    $http.put('/api/child/'+id, $scope.child)
    .success(function(response) {
        window.location.href='#/childs';
    });
}

$scope.removeChild = function(id) { console.log('removeChild called...');
    $http.delete('/api/child/'+id)
    .success(function(response) {
        window.location.href='#/childs';
    });
}

$scope.getParents = function() { console.log('getParents called...');
    $http.get('/api/parent')
    .success(function(response) {
        $scope.parents = response;
    });
}

$scope.getInstruments = function() { console.log('getInstruments called...');
    $http.get('/api/instrument')
    .success(function(response) {
        $scope.instruments = response;
    });
}

console.log('Child Controller loaded...');

}]);

Answer 3

我假设您的控制器看起来像这样：

angular
    .module('sampleApp.controllers', [])
    .controller('sampleAppController', function ($http, $scope, $route)

请参阅上面的.controller中添加$ route函数，现在你的代码如下：

$(modal).hide();
$route.reload();

更改jquery文件的顺序，它现在可以正常工作

的index.html：

<html ng-app="myApp" >

<head>

    <title>myApp - DEV</title>

    <link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css" >
    <link rel="stylesheet" href="css/style.css" >

</head>

<body>

    <nav class="navbar navbar-default" >
        <div class="container" >
            <div class="navbar-header" >
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" >
                    <span class="sr-only" >Toggle navigation</span>
                    <span class="icon-bar" ></span>
                    <span class="icon-bar" ></span>
                    <span class="icon-bar" ></span>
                </button>
                <a class="navbar-brand" href="#/" >myApp - DEV</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse" >
                <ul class="nav navbar-nav navbar-right" >
                    <li><a href="#/childs" >Childs</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right" >
                    <li><a href="#/parents" >Parents</a></li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </nav>

    <div class="container" >
        <div class="row" >
            <div class="col-md-12" >
                <div ng-view></div>
            </div>
        </div>
    </div>
    <!-- /.container -->

    <script src="lib/angular/angular.js" ></script>
    <script src="lib/angular-route/angular-route.js" ></script>
    <script src="lib/jquery/dist/jquery.js" ></script>
    <script src="lib/bootstrap/dist/js/bootstrap.js" ></script>
    <script src="lib/ui-bootstrap-tpls-2.5.0.min.js" ></script>

    <script src="/app.js" ></script>

    <script src="/controllers/parent.js" ></script>
    <script src="/controllers/child.js" ></script>


</body>
</html>