我在路线中传递和阅读多个查询字符串参数时苦苦挣扎。
$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:
'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对象如下所示:
{keywords: "?keywords=developer&location=New Yor", location: "k"}
有人可以告诉我我做错了什么吗?提前谢谢。
P.S。
是否可能是因为错误配置的路由?
当我通过searchJobOffer
函数进行导航时,它会将URL编码为:http://localhost:49380/#/joboffers%3Fkeywords=developer&location=london
,如果我尝试使用此网址http://localhost:49380/#/joboffers?keywords=developer&location=london
,则路由系统会将我转到默认路由(#/家)
答案 0 :(得分:17)
$ routeProvider与查询字符串不匹配,只与路由匹配。此外,您要将完整url
设置为$ location.path(),$ location.path()仅获取网址的path
部分。要设置包含查询字符串的整个网址,您需要使用$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();
}]);
(请注意使用$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();
}]);
$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();
}]);