问题描述
限时送ChatGPT账号..我正在努力在路由中传递和读取多个查询字符串参数.
I'm struggling with passing and reading multiple query string parameters in a route.
$routeProvider.when("/joboffers:keywords:location", {
controller: "jobOffersController",
templateUrl: "/App/Views/JobOffer/All.html"
});
这是搜索页面:
$scope.searchJobOffer = function () {
var vm = $scope.jobOfferSearchViewModel;
var path = "/joboffers?keywords=" +( vm.keywords || "") + "&location=" + (vm.location || "");
$location.path(path);
}
这是 JobOffersController:
And this is the JobOffersController:
'use strict';
app.controller('jobOffersController', ['$scope', '$routeParams', 'jobOfferService', function ($scope, $routeParams, jobOfferService) {
$scope.jobOffers = [];
function init() {
var keywords = $routeParams.keywords;
var location = $routeParams.location;
}
init();
}]);
读取 $routeParams 根本不起作用.如果我将developer"作为关键字并将New York"作为位置传递,则 $routeParam 对象如下所示:
Reading the $routeParams is not working at all. If I pass "developer" as a keyword and "New York" as location, the $routeParam object looks like this:
{keywords: "?keywords=developer&location=New Yor", location: "k"}
谁能告诉我我做错了什么?提前致谢.
Can somebody tell me what I'm doing wrong? Thanks in advance.
附言这可能是因为路由配置错误吗?当我通过 searchJobOffer
函数导航时,它将 URL 编码为:http://localhost:49380/#/joboffers%3Fkeywords=developer&location=london
并且如果我尝试使用这个 url http://localhost:49380/#/joboffers?keywords=developer&location=london
,路由系统将我放到默认路由 (#/home)
P.S.
Is it possible that this is because of a wrongly configured route?
When I navigate via the searchJobOffer
function, it encodes the URL to this: http://localhost:49380/#/joboffers%3Fkeywords=developer&location=london
and if I try to use this url http://localhost:49380/#/joboffers?keywords=developer&location=london
, the routing system drops me to the default route (#/home)
推荐答案
$routeProvider 不匹配查询字符串,只匹配路由.此外,您将一个完整的 url
设置为 $location.path() 并且 $location.path() 仅采用 url 的 path
部分.要设置包括查询字符串在内的整个 URL,您需要使用 $location.url()
.
$routeProvider does not match on query strings, only routes. Also, you're setting a full url
to $location.path() and $location.path() only takes the path
piece of the url. To set the entire URL including query string you need to use $location.url()
.
这里有几个选项:
$routeProvider.when("/joboffers/:location/:keywords", {
controller: "jobOffersController",
templateUrl: "/App/Views/JobOffer/All.html"
});
$scope.searchJobOffer = function () {
var vm = $scope.jobOfferSearchViewModel;
var path = "/joboffers/" + (vm.location || "") + "/" + ( vm.keywords || "");
$location.path(path);
};
app.controller('jobOffersController', ['$scope', '$routeParams', 'jobOfferService', function ($scope, $routeParams, jobOfferService) {
$scope.jobOffers = [];
function init() {
var keywords = $routeParams.keywords;
var location = $routeParams.location;
}
init();
}]);
2.仅匹配工作机会路径并从 $location.search() 中提取参数
(注意使用 $location.url()
而不是 $location.path()
)
$routeProvider.when("/joboffers", {
controller: "jobOffersController",
templateUrl: "/App/Views/JobOffer/All.html"
});
$scope.searchJobOffer = function () {
var vm = $scope.jobOfferSearchViewModel;
var url = "/joboffers?keywords=" +( vm.keywords || "") + "&location=" + (vm.location || "");
$location.url(url);
};
app.controller('jobOffersController', ['$scope', '$location', 'jobOfferService', function ($scope, $location, jobOfferService) {
$scope.jobOffers = [];
function init() {
var search = $location.search();
var keywords = search.keywords;
var location = search.location;
}
init();
}]);
3.如果您需要匹配路由和查询字符串,请尝试更强大的功能,例如 angular-ui-router
$stateProvider.state("JobOffers", {
url: '/joboffers?keywords&location',
controller: "jobOffersController",
templateUrl: "/App/Views/JobOffer/All.html"
});
$scope.searchJobOffer = function () {
var vm = $scope.jobOfferSearchViewModel;
var url = "/joboffers?keywords=" +( vm.keywords || "") + "&location=" + (vm.location || "");
$location.url(url);
};
app.controller('jobOffersController', ['$scope', '$stateParams', 'jobOfferService', function ($scope, $stateParams, jobOfferService) {
$scope.jobOffers = [];
function init() {
var keywords = $stateParams.keywords;
var location = $stateParams.location;
}
init();
}]);
这篇关于angularjs 中的多个查询字符串参数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
更多推荐
[db:关键词]
发布评论