javascript - $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 部分将显示一个用户列表，我可以在其中选择要更新的记录。当我单击更新按钮时，ngRoute 成功地将应用程序路由到 edit-user.jsp 部分。但是，当我单击该页面中的“保存”按钮时，它不会将路由更改为“/list-users”，即使我使用了 $location.path('/list-users')在 Controller EditUserCtrl 中。它会将我重定向到“[app_url]/?”。

这是我的 Controller :

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
            });
        }

    } ]);

更新函数 (saveUser) 使用一个服务，它通过 ngResource 向后端服务器发出 Restful 请求。该服务工作正常(所有测试均通过)。

我在调用资源操作时将 $location.path 包含在成功回调函数中。

我已经 try catch "$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 代码，而不是在表单的 ng-submit 中提供函数调用 saveUser()，我使用了 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>

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

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