heygema heygema - 4 months ago 15
AngularJS Question

How do I passing string to another page with $stateParams?

I'm using angular 1.5.x & babel. I want to passing a string in 1st page and then showing it in 2nd page.
I have these 2 states:

1st state

.state('outside'{
url:'/outside',
templateUrl: 'outside.html',
controller: 'outsideCtrl'
})


2nd state

.state('inside',
url:'/inside/:building',
templateUrl: 'inside.html',
controller: 'insideCtrl'
})


my 2nd controller look like this.

constructor($stateParams) {
this.Building : $stateParams.building;
}


1st html

<a ui-sref="inside ({building: 'castle'})"> castle </a>
<a ui-sref="inside ({building: 'blacksmith'})"> castle </a>


2nd html

<p>Okay, now you are in a {{insideCtrl.Building}} </p>


I still get it wrong because of the building is undefined, and also is it possible to passing a string ?
thank you

Answer

You can do it like this.

add the param attribute in your state.

.state('inside',
 url:'/inside',
 templateUrl: 'inside.html',
 controller: 'insideCtrl',
 params: {
           building: ""
        }
})

in html, change ui-sref like below

ui-sref="inside({building : yourstringvaluevariable})"

in the second controller receive the parameter like this.

var newBuilding = $state.params.building; 
Comments