AngularJS UI-router pass param from view to state resolve

Issue

I am trying to pass params in ui-sref then access it to state resolve.

HTML View

ui-sref="reservation({check_in: check_in, check_out: check_out})"

I am trying to get the params passed in ui-sref to the resolve.

This is some code in my controller when I don’t yet use a resolve.

        $http.get('server/getFilteredRooms.php', {
            params: {
               check_in: data.check_in,
               check_out: data.check_out
            }
        }).then(function(res){

Then I tried to implement resolve because I want to wait for the data to get before rendering the view. In that way, I believe, I will not encounter undefined due to data from http function is not yet returned.

JS (app.js)

.state("reservation", { 
    url: "/reservation",
    templateUrl: "pages/reservation.html",
    controller: "ReservationController",
    resolve : {
      promiseObj : function($http){
        return $http({
          method: 'GET',
          url: 'server/getFilteredRooms.php',
          params: {
            check_in: check_in,
            check_out: check_in
          }
        });
      }
    }
  })

And I am trying to access in my PHP file like this.

PHP

$check_in = $_GET['check_in'];
$check_out = $_GET['check_out'];

Solution

To receive those parameters in the state’s resolve, at first, you need to declare those in the state’s configuration. Change the state’s configuration, and introduce a params key as follows:

.state("reservation", { 
  url: "/reservation",
  templateUrl: "pages/reservation.html",
  controller: "ReservationController",
  params: {
    check_in: null,
    check_out: null
  },
  resolve: ...

Then, modify the resolver as follows:

promiseObj: function($http, $transition$){
    var params = $transition$.params();

    return $http({
      method: 'GET',
      url: 'server/getFilteredRooms.php',
      params: {
        check_in: params.check_in,
        check_out: params.check_in
      }
    });
 }

This way, your resolver knows that it should extract the parameters’ values from the URL and passes those to the HTTP call.

Answered By – 31piy

Answer Checked By – Marie Seifert (AngularFixing Admin)