1

我在 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 部分将显示用户列表,我可以在其中选择要更新的记录。当我单击 ong update 按钮时,ngRoute 成功地将应用程序路由到 edit-user.jsp 部分。但是,当我单击该页面中的“保存”按钮时,它不会将路由更改为“/list-users”,即使我使用了$location.path('/list-users')控制器中的 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
            });
        }

    } ]);

更新函数 ( saveUser) 使用通过 ngResource 向后端服务器发出 Restful 请求的服务。该服务运行良好(所有测试均已通过)。

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

我尝试捕捉"$locationChangeSuccess""$locationChangeError"看到在这种情况下 a$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>
4

3 回答 3

5

好吧,经过几天的尝试并没有在互联网上找到任何帮助,我解决了这个问题。

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

当我更仔细地跟踪我的应用程序时,我发现我的取消按钮工作得很好,并且$location.path成功地将我送回了/list-users页面。

进一步的调查表明,我的 Cancel 和 Save 按钮之间的区别在于 Cancel 按钮使用 ,ng-click而我将 Save 按钮的类型定义为“提交”。

saveUser()然后我更改了我的 html 代码,因此我没有在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 预期失败的承诺对象之一(并因此导致路由错误)。

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

于 2014-08-06T23:20:21.193 回答
0

好吧,经过一年多的 Angular 经验,我现在知道最初的问题是什么。阅读 Angular 的 ng-submit 文档后,我发现了这一点:

此外,它会阻止默认操作(对于表单,这意味着将请求发送到服务器并重新加载当前页面),但前提是表单不包含 action、 data-action 或 x-action 属性。

查看代码很明显,我在定义表单元素时错误地添加了一个动作属性:

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

删除它将解决问题:

<form role="form" class="form-horizontal" ng-submit="saveUser()">
于 2016-01-04T01:21:02.203 回答
-1

你可以添加 $event.preventDefault(); 在保存用户()之前;它会起作用的。

于 2015-12-30T09:32:37.367 回答