CODEWITHSUNDEEP
javascriptangularjsangular-ui-routerundefined
DevRight
DevRight

Reputation: 395

$stateParams are undefined after passing to controller

I am using ui-router to pass an object to another state and controller using 

$state.go()

But the console.log for the $stateParams object is showing up as undefined. The object is made up x and y coordinates which are simple integer values between 0 and 20. When I console.log the userData in the EnterCtrl I get the correct variables, so I presume the correct information is been sent.

I have looked through many examples on here and tried many options, but I can not get it to work. How can I get the $stateParams to be seen by the CanvasCtrl

EnterCtrl passes the userData object using $state.go

myMap.controller('EnterCtrl',['$scope', '$state', function EnterCtrl($scope,$state){
    $scope.formData = {
        x: 0,
        y: 0
    };
    var userData = $scope.formData;
   // console.log(userData);

    $scope.goToAnswer = function(){
        console.log(userData);
            $state.go('answer', {coor: userData})  ;
        };

}]);

Answer State which the object gets passed to. 

var answerState = {
        name: 'answer',
        url: '/answer/:coor',
        templateUrl: 'partials/answer.html',
        controller: 'CanvasCtrl',
        params: {coor: null}
    };

The controller which recieves the stateParams.

myMap.controller('CanvasCtrl', ['$scope','$state','$stateParams',function CanvasCtrl($scope,$state,$stateParams){

var userData = $stateParams.coor;
    // var userDataY = $stateParams.coor.y;
    //var userDataX = $stateParams.coor.y;

   console.log(userData);
}]);

https://plnkr.co/edit/lwP7DGkwHl2ZWWegazyv?p=preview

Upvotes: 0

Views: 332

Answers (2)

clever_bassi
clever_bassi

Reputation: 2480

I fixed your issue here. Basically, I added JSON.stringify to convert the object to json before sending it otherwise it would print as [object Object].

Upvotes: 1

sumit chauhan
sumit chauhan

Reputation: 1300

first create a factory which set your state param value contains function like below:

      function stateParam() { 
          var selectedRelease = "your value"
          $state.go('app.dashboard.detail.releases', {'selectedRelease': 
                    selectedRelease});
         }

inject this factory in both controller.

call this function in your first controller using factory name. Like if you have factory name than you can call it as: factory.stateParam()

Upvotes: 0

Related Questions