Is there a way to pass a hidden value or optional parameter that is not part of the URL in order to switch between states based on that parameter? I attempted something like this:
<a ui-sref="state2({key:'value', optional: 'B'})">Send param and go to page 2</a>
In the route provider:
$stateProvider
.state('state2', {
url: "/:key",
templateUrl: "state1.html",
params: {
optional: null
},
controller: 'contollerA'
})
.state('state3', {
url: "/:key",
templateUrl: "state3.html",
controller: 'contollerB'
})
.state('state4', {
url: "/:key",
templateUrl: "state4.html",
controller: 'contollerC'
})
In the controller:
.controller('contollerA', function($scope, $stateParams, $state) {
if ($stateParams.optional === 'B') {
$state.go('state3');
} else {
$state.go('state4');
}
})
Unfortunately, this setup is not working as expected and the browser console shows an error message saying "invalid state reference." What is the correct approach to achieve this?