CODEWITHSUNDEEP
angularjs
Odinn
Odinn

Reputation: 1106

Angular - What is the best way to store and pass url id through ui-router state?

Can't find the way to store and pass two url ids in complex url such as: state/id/state2/secid

So I need to store first ID and pass it to my second state and use previous ID and new one ID. Also I have to store it when I go back to the first state

I have two different states:

State A and State B.

.state('stateZero.list', {

        url: 'list/',
        template: '<table><input ui-sref="{{config.sref(id: id, prevId: prevId)}}"</table>',
        controller: ($scope, $stateParams, $state) {
            $scope.config = {
                sref = "stateA.list"
            };
        }
    })
A:
    .state('stateA.list', {
        params: {
            stateAid: ''
        },
        url: 'list/:id',
        template: '<table><input ui-sref="{{config.sref(id: id, prevId: prevId)}}"</table>',
        controller: ($scope, $stateParams, $state) {
            $stateParams.stateAid = $stateParams.id;  // Trying to store stateAid
            $scope.config = {
                sref = "stateB.list2.input"
            };
        }
    })

B:
    .state('stateB.list2', {
        abstract: true
        url: 'list/: stateAid / editor: id ',
        template: ' < tabs > < /tabs>',
        controller: ($scope, $stateParams, $state) {

            console.log($state.get('stateA.list').params);  // trying to get stateAid, but it's empty
        }
    })
    .state('stateB.list2.input', {
        url: '/ ',
        template: ' < table ><input ui-sref="{{config.sref(id: id, prevId: prevId)}}" < /table>',
        controller: ($scope, $stateParams, $state) {

            $scope.config = {
                sref = "stateA.list"
            };
        }
    })

I've been trying to use $state.get as shown in 'stateB.list2' controller, but stateAid param from 'stateA.list' disappear. Another interesting moment than if i type state param in stateA.list manual as a string I can see it in the next state.

Does anyone have an example of url architecture ?

Upvotes: 0

Views: 521

Answers (1)

Kittu
Kittu

Reputation: 198

.state('home.temp1', {
        url: "/temp1/{id1}",
        views: {
            "mainContentView@": {
                templateUrl: "appjs/temp1.html",
                controller: 'temp1Controller'
            }
        }
    })
.state('home.temp1.temp2', {
    url: "/temp2/{id2}",
    views: {
        "mainContentView@": {
            templateUrl: "appjs/temp1.html",
            controller: 'temp2Controller'
        }
    }
})

Now in temp1Controller.

$scope.id1 = $stateParams.id1;
$state.go('home.temp1.temp2', {id2 : '2'});

Now in temp2Controller.

$scope.id1 = $stateParams.id1;
$scope.id2 = $stateParams.id2;

In the first state 'home.temp1' which has URL '/temp/1' and in the second state 'home.temp1.temp2' the URL formed would be '/temp/1/temp2/2' and from the second controller you can access both the parameters.

Hope this helps!

Upvotes: 1

Related Questions