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。但是，当我单击该页面中的“保存”按钮时，它不会将路由更改为＆＃34; / list-users＆＃34;，即使我在Controller EditUserCtrl中使用了$location.path('/list-users')。它会将我重定向到＆＃34; [app_url] /？＆＃34;。

这是我的控制器：

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。

我已尝试捕获"$locationChangeSuccess"和"$locationChangeError"并看到在这种情况下抛出$locationChangeError但我不知道哪个承诺对象被拒绝导致此错误。

非常感谢任何帮助。

修改

这是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，而我将保存按钮的类型定义为＆＃34;提交＆＃34;。

然后我更改了我的html代码，以便在表单的saveUser()中提供函数调用ng-submit，而不是使用ng-click作为“保存”按钮，并将其类型更改为＆＃34;按钮＆＃34;

这是我的html partial的工作版本。我不需要在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对象（因此导致路由错误）。

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

Answer 2

经过一年多的Angular经验，我现在知道第一个问题是什么问题。阅读Angular的ng-submit文档我发现了这个：

此外，它会阻止默认操作（表单意味着将请求发送到服务器并重新加载当前页面），但仅限于表单不包含操作，数据操作或x - 作用属性。

查看代码时，很明显我在定义表单元素时错误地添加了 action 属性：

<form role="form" action="#" class="form-horizontal" ng-submit="saveUser()">

删除它将解决问题：

<form role="form" class="form-horizontal" ng-submit="saveUser()">

Answer 3

你可以添加$ event.preventDefault（）;在saveUser（）之前;它会起作用。

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

3 个答案: