Angularjs: how to handle parameter in url with routing

Question

My URL scheme is as follows:

/drive/Fertilisation?open=potasse

I get to a page as follows:

<a ng-click="openPageUrl('/drive/Fertilisation?open=potasse')">open corn page</a>

In the controller, openPageUrl is as follows:

$scope.openPageUrl = function (url) {
    closePopover();
    console.log("Open page url "+url);
    $location.url(url);
};

Still in the controller, the route is handled, the controller handle $routeParam like this:

// Potential popup to open
$scope.openPopupOnLoad = $routeParams.open;
console.log("$scope.openPopupOnLoad = "+$scope.openPopupOnLoad +"; $routeParams.open = "+ $routeParams.open);

But it sounds like the controller loose the param, logs are as follows:

[Log] Open page url /drive/Fertilisation?open=potasse (kws.corn.app.js.html, line 8581)
[Log] Open page url /drive/Fertilisation (kws.corn.app.js.html, line 8581)
[Log] App controller: boots up Tue Jul 29 2014 22:54:42 GMT+0200 (CEST)
[Log] $scope.openPopupOnLoad = undefined; $routeParams.open = undefined (kws.corn.app.js.html, line 607)
[Log] App controller: already executed, won't do it again except routes (kws.corn.app.js.html, line 610)
[Log] App controller: boots up done Tue Jul 29 2014 22:54:42 GMT+0200 (CEST) (kws.corn.app.js.html, line 632)

How would you handle the param?

Just for any whom come across this and base the structure of their own code on the solution, be careful to sanitise the url param to only specific files that are MEANT to be accessed. Otherwise since your application will often have high OS privileges, you may get LFI or RFI vulnerabilities. owasp.org/index.php/Testing_for_Local_File_Inclusion — Tainted
– Tainted, Commented Mar 1, 2015 at 22:48

TrazeK · Accepted Answer · 2014-07-29 21:32:08Z

1

You can set the params in the app's route config section:

app.config(function($routeProvider) {
  $routeProvider
    .when("/route1/:param", {
      template: "<div>Route #1</div><div>Route param: {{param}}</div>",
      controller: "Ctrl"
    })
    .when("/route2/:param", {
      template: "<div>Route #2 </div><div>Route param: {{param}}</div>",
      controller: "Ctrl"
    });
});

Then refer to them in links:

<a href="#/route1/param">Route 1</a>
<a href="#/route2/potasse">Route 2</a>

Access them from the controller:

app.controller("Ctrl", function($scope, $routeParams) {
  $scope.param = $routeParams.param;
});

See Plunker

answered Jul 29, 2014 at 21:32

TrazeK

8381 gold badge8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angularjs: how to handle parameter in url with routing

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related