Angularjs ng路由-具有特殊字符的参数

该产品是一个JSON对象。如果产品对象包含“/”字符，则上述代码将路由到“否则”。任何解决方法的想法。

第一种方法：使用ng单击将模型存储在服务中，然后转到位置

首先，在列表项中添加一个ng click，该列表项调用控制器上的get attributes以删除href

myApp.config([ '$routeProvider', function($routeProvider) {
$routeProvider
.when('/getAttributes/:product/:code/:name/:hierName', {
    templateUrl : 'view/attributes.jsp',
    controller : 'attributeController'
}).otherwise({
    redirectTo : '/mainMenu'
});
} ]);

在控制器中，添加一个名为getAttributes的方法，该方法将由前面提到的ng click调用。它将调用一个服务并使用其setModel函数来持久化单击的模型。最后，它将路由getAttributes

myApp.config([
    '$routeProvider', function($routeProvider) {
        $routeProvider
            .when('/getAttributes/', {
                templateUrl: 'view/attributes.jsp',
                controller: 'attributeController'
            }).otherwise({
                redirectTo: '/mainMenu'
            });
    }
]);

属性控制器将调用相同的服务，并使用其getModel方法设置模型

myApp.controller('someController', [
    '$scope', '$location', 'someService', function($scope, $location, someService) {
        $scope.getAttributes = function(model) {
            someService.setModel(model);
            $location.url('getAttributes');
        };
    }
]);

该服务需要以下内容：

myApp.controller('attributeController', [
    '$scope', 'someService', function($scope, someService) {
        $scope.model = someService.getModel();
    }
]);

只有当您永远不会以任何其他方式路由到getAttributes时，这种方法才适用。更灵活的第二种方法是可能的

第二种方法：使用Resolve获取模型，在服务中设置，然后加载到控制器中

将href修改为ng href，并将其设置为getAttribute/123或类似的格式

myApp.service('someService', function() {
    var model;

    return {
        getModel: function() {
            return model;
        },
        setModel: function(newModel) {
            model = newModel;
        }
    };
});

如前所述，服务将获取/getAttributes/ID路由上传递的ID，并使用它调用服务器。另一种方法是让服务调用存储库。最终结果是相同的：将模型变量设置为与服务器调用的结果相等

myApp.config([
    '$routeProvider', function($routeProvider) {
        $routeProvider
            .when('/getAttributes/:id', {
                templateUrl: 'view/attributes.jsp',
                controller: 'attributeController',
                resolve: {
                    getModel: function(someService) {
                        return someService.get();
                    }
                }
            }).otherwise({
                redirectTo: '/mainMenu'
            });
    }
]);

最后，您的AttributeControl的行为与第一个示例相同。它将$scope.model设置为someService.getModel（），从而提供产品属性

myApp.config([
    '$routeProvider', function($routeProvider) {
        $routeProvider
            .when('/getAttributes/', {
                templateUrl: 'view/attributes.jsp',
                controller: 'attributeController'
            }).otherwise({
                redirectTo: '/mainMenu'
            });
    }
]);

---

这种方法的优点是，您的路由可以从应用程序中的任何位置进行深度链接而不会出现问题。

上述代码路由到什么？问题还不清楚。@m.casey：如果JSON对象'product'是我需要传入'AttributeControl'的参数，它包含一个'/'。它被路由到mainmenu而不是attributes.js，而不是在路由中将对象作为参数传递，或者将所述对象存储在服务中，然后将其注入属性控制器？这将大大简化您的路线。@m.casey我刚刚更新了代码。在ng repeat内部触发ngroute。那么，我们应该在什么时候将所需的产品对象存储在服务中呢？请参见下面的答案。我将尝试清理格式。

    <nav>
        <ul class="list">
            <li ng-repeat="product in data | startFrom:currentPage*pageSize | limitTo:pageSize">
                <span>{{product}}</span>
                <a ng-href="/getAttributes/{{product.id}}">{{product.prd_name}}</a>
            </li>
        </ul>
    </nav>

myApp.config([
    '$routeProvider', function($routeProvider) {
        $routeProvider
            .when('/getAttributes/:id', {
                templateUrl: 'view/attributes.jsp',
                controller: 'attributeController',
                resolve: {
                    getModel: function(someService) {
                        return someService.get();
                    }
                }
            }).otherwise({
                redirectTo: '/mainMenu'
            });
    }
]);

myApp.service('someService', [
    '$http', function($http) {
        var model;

        return {
            get: function(id) {
                return $http.get('api/attribute/' + id).then(function(response) {
                    model = response.data;
                });
            },
            getModel: function() {
                return model;
            },
            setModel: function(newModel) {
                model = newModel;
            }
        };
    }
]);