angularjs中的多个查询字符串参数

小编典典

angularjs中的多个查询字符串参数

angularjs

我正在努力在路由中传递和读取多个查询字符串参数。

$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根本不起作用。如果我将“ developer”作为关键字，将“ New York”作为位置，则$
routeParam对象如下所示：

{keywords: "?keywords=developer&location=New Yor", location: "k"}

有人可以告诉我我在做什么错吗？提前致谢。

PS这可能是由于错误配置的路由吗？当我通过该searchJobOffer函数导航时，它会将URL编码为：http://localhost:49380/#/joboffers%3Fkeywords=developer&location=london如果尝试使用此url
http://localhost:49380/#/joboffers?keywords=developer&location=london，则路由系统会将我引导至默认路由（＃/
home）

阅读 285

2020-07-04

共1个答案

小编典典

$ routeProvider与查询字符串不匹配，仅与路由匹配。同样，您将url$ location.path（）设置为完整，而$
location.path（）仅采用path部分网址。要设置包括查询字符串在内的整个URL，您需要使用$location.url()。

以下是一些选择：

1.改用漂亮的网址

$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](https://github.com/angular-ui/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();
}]);

2020-07-04