Unable to get state params from other controller

Question

controller1:

app.controller('task1Controller',['$scope', 'taskFactory', '$state', function($scope, taskFactory, $state){

    $scope.taskData = {};

    taskFactory.get().then(function(response){
        $scope.jsonData = response.data.data.resultCareGivers[0];
        $scope.taskData.fname = $scope.jsonData.firstName;
        $scope.taskData.lname = $scope.jsonData.lastName;
        $scope.taskData.email = $scope.jsonData.email;
    });

    $scope.viewDetails = function(){
        console.log('taskData before route ', $scope.taskData);
        $state.go('view-details', {some: $scope.taskData});
    };
}]);

controller2:

app.controller('viewDetailsController', ['$scope', '$stateParams', '$state', function($scope, $stateParams, $state){
    console.log('receiveing state params ', $stateParams); //returns null
}]);

Html:

<div ng-controller="task1Controller">
    <div>
        <a ng-click="viewDetails()">View Details</a>
    </div>
</div>

<div class="container" id="main" ng-controller="viewDetailsController"></div>

Unable to get state params from controller one to controller two. I am trying to send the params in state.go('params here'), how ever I am not able to retrieve it in controller two (returns null).

config:

routes configured in state provider

app.config(['$stateProvider', '$urlRouterProvider', 
    function($stateProvider, $urlRouterProvider){

    $urlRouterProvider.otherwise('task1');
    var header = {
        templateUrl: 'views/header.html',
        controller: function ($scope) {
        }
    };

    $stateProvider
    .state('task1', {
        url: "/task1",
        views: {
            header: header,
            content: {
                templateUrl: 'views/task1.html',
                controller: function($scope){
                    console.log('$scope1 ', $scope.image);
                }
            }
        }
    })
    .state('view-details', {
        url: "/view-details",
        views: {
            header: header,
            content: {
                templateUrl: 'views/view-details.html',
            }
        }
    });
}]);

Vivz · Accepted Answer · 2017-08-07T10:38:34.210

1

You can access the value using $stateParams. You have to reference the parameter using $stateParams

Controller:

app.controller('viewDetailsController', ['$scope', '$stateParams', '$state', function($scope, $stateParams, $state){
    console.log('receiveing state params ', $stateParams.some); //returns some
}]);

Config:

 .state('view-details', {
        url: "/view-details",
        params: { some: null },
        views: {
            header: header,
            content: {
                templateUrl: 'views/view-details.html',
            }
        }

For more info on how to pass an object from controller to another via $stateParams, check Pass object as parameter in $state.go

edited Aug 07 '17 at 10:38

answered Aug 07 '17 at 10:14

Vivz

6,625
2
17
33

it says undefined when I use $stateParams.some – kittu Aug 07 '17 at 10:23
`app = angular.module('techGeneTask', ['ui.router']);` – kittu Aug 07 '17 at 10:29
No I am asking about your routing file which includes the configurations. Check my updated answer – Vivz Aug 07 '17 at 10:31
I don't want to send params in url – kittu Aug 07 '17 at 10:36
What is null in `params: { some: null },` ? – kittu Aug 07 '17 at 10:45
By default you have to pass something to your params. So we are passing null, you can pass any default value here. But there is a downside that if you refresh you will lose the data. This is the way to sustain the data without passing it in url. If you want the data to persist even on refresh , then you can create a service or factory to share data between controllers. Check https://stackoverflow.com/questions/21919962/share-data-between-angularjs-controllers for more info. – Vivz Aug 07 '17 at 10:48
you mean page refresh? Even after using service, refreshing the page will loose data right? – kittu Aug 07 '17 at 10:51
1

Not if you make a service or factory call to retrieve the data and store it on scope. Then even after refresh data will persist – Vivz Aug 07 '17 at 10:52

Unable to get state params from other controller

1 Answers1