在angularjs多个查询字符串参数 [英] Multiple query string parameters in angularjs
问题描述
我与挣扎的传球和路线读取多个查询字符串参数。
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是不工作的。如果我通过开发商作为关键字,纽约的位置,$ 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.
P.S。
是否有可能,这是因为一个错误配置的路由呢?
当我通过 searchJobOffer
功能导航,它连接codeS的URL这样:的http://本地主机:49380 /#/ joboffers% 3Fkeywords =开发商和放大器;位置=伦敦
,如果我尝试使用此网址的http://本地主机:49380 /#/ joboffers关键字=开发商和放大器;位置=伦敦
,路由系统将对我的默认路由(#/家)
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不匹配查询字符串,只有路线。此外,你设置一个完整的网址
至$ location.path()和$ location.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拉PARAMS()
(注意使用 $ 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。如果你需要匹配的路线和查询字符串,尝试一些更强大的如角UI路由器
$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屋!