$state.go doesn't pass parameters

Question

This is the part of my HTML:

<td>
   <button class="btn btn-primary" ui-sref="edit({id: v.customerId})" ui-sref-opts="{reload: true}">Edit</button>
   <button class="btn btn-primary" ng-click="removeRow(v.firstName);">Delete</button>
</td>

as you can see I am passing the customerId as and id to be one of the parameters displayed in the url

app.js:

var app = angular.module('webtrekkApp', ['ngSanitize', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('edit', {
            name: 'edit',
            url: '/users/:id/edit',
            templateUrl: './views/customer-details.html',
            controller: 'ctrl',
            params: {
                obj: null
            }
        });
});

ctrl.js:

//If 'initData' isn't set, then set it up by default
    if(!localStorage.getItem('initData')) {
        $window.localStorage.setItem('initData', JSON.stringify($scope.initData));
    }
    $scope.retrievedData = JSON.parse($window.localStorage.getItem('initData'));
    for (var i = 0; i < $scope.retrievedData.length; i++) {
        $scope.retrievedData[i].birthdayDate = new Date().getFullYear() - new Date($scope.retrievedData[i].birthdayDate).getFullYear();
    }
    $scope.sortedType = 'firstName';
    $scope.sortedReverse = false;
    //Remove Rows and Update localStorage Key Values
    $scope.removeRow = function(name) {
        var index = $scope.retrievedData.findIndex(function(obj) {return obj.firstName === name});
        $scope.retrievedData.splice(index, 1);
        window.localStorage.setItem('initData', JSON.stringify($scope.retrievedData));
    };
    $state.go('edit', {obj: $scope.retrievedData});

So I a table, and when users clicks on 'edit', I need THAT object to be passed to the ui.router so I can display it in customer-details.html. How can I do it? I am doing something wrong here. I have read all the documentation on ui.router but do not know should $state.go be defined in the initial controller or in some other. Also I've followed this question, but couldn't get it to work: How to pass custom data in $state.go() in angular-ui-router?

Please refer https://stackoverflow.com/questions/19516771/how-to-send-and-retrieve-parameters-using-state-go-toparams-and-stateparams — Alexis, Jun 29 '17 at 09:57
` params: { 'obj': null }` Have you tried adding the parameter like this in the app.config->state. — Alexis, Jun 29 '17 at 10:00
This is the message I receive: `angular-ui-router.min.js:9 Error: Param values not valid for state 'edit'` — tholo, Jun 29 '17 at 10:01
is $scope.retrievedData populated before calling the $state.go() ? — Karim, Jun 29 '17 at 10:06
Yes.. but this is all in one controller, could that be an issue? — tholo, Jun 29 '17 at 10:07

Karim · Answer 1 · 2017-06-29T10:44:55.947

2

In your edit state you have two parameters, id and obj, one of which inside the url.

But when you trigger the state from your controller you are not passing the id parameter and you did not define a default value

$state.go('edit', {obj: $scope.retrievedData});

try adding it inside your params object

params: {
   obj: null,
   id: null
}

EDIT:

to answer your further question:

<button class="btn btn-primary" ng-click="handleItem(v);">Go to Edit state</button>

$scope.handleItem = function(item){
 //here extract your item specific data from $scope.retrievedData then change the state
 var itemData = getItemData(item, $scope.retrieveData);
 $state.go('edit', {obj: itemData});
}

edited Jun 29 '17 at 10:44

answered Jun 29 '17 at 10:18

Karim

8,454
3
25
33

But isn't the id passed in the html in ui-sref? – tholo Jun 29 '17 at 10:27
sorry, you were right. I get the object passed, but now I pass the entire object, while I need to pass only the property that is clicked so I can interpolate it in my view. – tholo Jun 29 '17 at 10:29
I get the object passed in console: `Object {#: null, id: "2", obj: Array(5)}` but I need to pass only the one that is clicked. – tholo Jun 29 '17 at 10:31
it's not clear from the code when you trigger that $state.go, anyway wrap your $state.go inside a method and trigger it onclick on the button passing the information of which item has been clicked – Karim Jun 29 '17 at 10:38
That's what I should do, probably with ng-click? But how can I pass the information of that particular item, that's what's bugging me.. – tholo Jun 29 '17 at 10:40
are you still here? – tholo Jun 29 '17 at 12:36

score 0 · Answer 2 · answered Jun 29 '17 at 10:02

0

Hi you are not using controller, if you want to pass parameters to $state.go() you should have controller to get that value in particular state.

app.js

var app = angular.module('webtrekkApp', ['ngSanitize', 'ui.router']);
app.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state('edit', {
            name: 'edit',
            url: '/users/:id/edit',
            templateUrl: './views/customer-details.html',
            controller: 'myController',
            params: {
                obj: null
            }
        });
});

in Controller

function myController($state) {
   conrole.log($state.params.obj);
}

answered Jun 29 '17 at 10:02

raj peer

694
6
13

I'm still receiving this error: `angular-ui-router.min.js:9 Error: Param values not valid for state 'edit'` Should `$state.go()` be defined in my initial controller, where my index.html is, or some other, where my view is? – tholo Jun 29 '17 at 10:04
yes you are right, keep 'conrole.log($state.params.obj);' in your initial controller. I have given just example – raj peer Jun 29 '17 at 10:05

$state.go doesn't pass parameters

2 Answers2