$ location.path在表单提交后不会更改路由

Question

我在stackoverflow上的angular js中看到了很多关于$ location.path的问题,但是没有一个能解决我的问题.

我在app.js中定义了以下路线:

angular.module(
    'hotPosts',
    [ 'hotPosts.filters', 'hotPosts.services',
            'hotPosts.directives',
            'hotPosts.controllers', 'ngRoute', 'ngSanitize' ]).config(
    [ '$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
        $routeProvider.when('/hot-posts', {
            templateUrl : 'gptarin/partials/hot-posts.jsp',
            controller : 'ListPostsCtrl'
        });
        $routeProvider.when('/list-users', {
            templateUrl : 'gptarin/partials/list-users.jsp',
            controller : 'ListUserCtrl'
        });
        $routeProvider.when('/edit-user/:userId', {
            templateUrl : 'gptarin/partials/edit-user.jsp',
            controller : 'EditUserCtrl'
        });
        $routeProvider.when('/create-user', {
            templateUrl : 'gptarin/partials/edit-user.jsp',
            controller : 'EditUserCtrl'
        });
        $routeProvider.otherwise({
            redirectTo : '/hot-posts'
        });
        $locationProvider.html5Mode(false);

    } ]);

list-users.jsp partial将显示一个用户列表,我可以在其中选择要更新的记录.当我点击ong更新按钮时,ngRoute成功将应用程序路由到edit-user.jsp partial.但是,当我单击该页面中的"保存"按钮时,它不会将路径更改为"/ list-users",即使我使用了$location.path('/list-users')Controller EditUserCtrl.它将我重定向到"[app_url] /？".

这是我的控制器:

app.controller('EditUserCtrl', [
    '$scope',
    '$routeParams',
    'UserListFactory',
    'UserFactory',
    '$location',
    function($scope, $routeParams, UserListFactory, UserFactory,
            $location) {

        // callback for ng-click 'updateUser':
        // force it to refresh in the client
        $scope.saveUser = function() {
            if (angular.isUndefinedOrNull($scope.user)) {
                $scope.user = {};
                UserListFactory.create($scope.user, function() {
                    $location.path('/list-users');
                });
            } else if (angular.isUndefinedOrNull($scope.user.id)) {
                UserListFactory.create($scope.user, function() {
                    $location.path('/list-users');
                });
            } else {
                UserFactory.update($scope.user, function() {
                    $location.path('/list-users');
                });

            }
        };

        // callback for ng-click 'cancel':
        $scope.cancel = function() {
            $location.path('/list-users');
        };

        if ($routeParams.userId !== undefined) {
            $scope.user = UserFactory.show({
                userId : $routeParams.userId
            });
        }

    } ]);

update function(saveUser)使用一个服务,该服务通过ngResource向后端服务器发出Restful请求.该服务工作正常(所有测试都通过).

在调用资源操作时,我在成功回调函数中附加了$ location.path.

我已经尝试捕获"$locationChangeSuccess"并且"$locationChangeError"看到在这种情况下$locationChangeError抛出了一个但是我不知道哪个promise对象被拒绝导致了这个错误.

任何帮助都非常感谢.

编辑:

这是edit-user.jsp部分

<div class="container-fluid">
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h2 class="panel-title label">Edit User</h2>
        </div>
        <div class="panel-body">
            <form role="form" action="#" class="form-horizontal" ng-submit="saveUser()">
                <div class="form-group col-sm-11">
                    <div class="form-group">
                        <label for="accountId" class="col-sm-1 control-label">G+
                            Id: </label>
                        <div class="col-sm-4">
                            <input type="text" id="accountId" class="form-control"
                                ng-model="user.gpId"></input>
                        </div>
                        <label for="accountName" class="col-sm-2 control-label">Name:
                        </label>
                        <div class="col-sm-5">
                            <input type="text" id="accountName" class="form-control"
                                ng-model="user.name"></input>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-9">
                            <input type="checkbox" id="showPosts" class="form-control"
                                ng-model="user.listPosts">ShowPosts</input>
                        </div>
                    </div>
                </div>
                <div class="form-group col-sm-1">
                    <div class="row">
                        <div class="col-sm-offset-1 col-sm-12 pull-right">
                            <button type="submit" class="btn btn-primary">Save</button>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-sm-offset-1 col-sm-12 pull-right">
                            <button type="button" class="btn btn-primary" ng-click="cancel()">Cancel</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

Answer 1

好几天尝试了一切,没有找到任何互联网帮助我解决了这个问题.

我决定与阅读这篇文章的人分享它,这样它也不需要花费几天的时间.

当我更仔细地追踪我的应用程序时,我发现我的取消按钮工作正常,$location.path并成功将我发送回/list-users页面.

进一步的调查显示,我的取消和保存按钮之间的区别在于取消按钮使用了ng-click我的保存按钮的类型我定义为"提交".

然后,我改变了我的HTML代码,这样,而不是提供的函数调用saveUser()的ng-submit形式,我用了一个ng-click用于保存按钮,改变它的类型为"按钮".

这是我的html部分的工作版本.我不需要在js文件中更改任何内容.

<form role="form" action="#" class="form-horizontal">
    <!--  ng-submit="saveUser()"> -->
    <div class="form-group col-sm-11">
        <div class="form-group">
            <label for="accountId" class="col-sm-1 control-label">G+ Id: </label>
            <div class="col-sm-4">
                <input type="text" id="accountId" class="form-control" ng-model="user.gpId"></input>
            </div>
            <label for="accountName" class="col-sm-2 control-label">Name: </label>
            <div class="col-sm-5">
                <input type="text" id="accountName" class="form-control" ng-model="user.name"></input>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <label> 
                    <input type="checkbox" id="showPosts" ng-model="user.listPosts"> Show Posts
                </label> 
            </div>
            <div class="col-sm-12">
                <button type="button" class="btn btn-primary" ng-click="saveUser()">Save</button>
                <button type="button" class="btn btn-primary" ng-click="cancel()">Cancel</button>
            </div>
        </div>
    </div>
</form>

我现在仍然不知道表单提交角度的机制以及为什么它会导致$ location.path期望失败的一个promise对象(因此导致路由错误).

在这方面的任何澄清评论都非常感谢.