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 根本不起作用.如果我将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屋！