Issue
In my project using ui-router, I have a 404 page that occurs whenever the a certain component does not exist ( in the otherwise). So instead of displaying, broken JSON, a 404 page is triggered. Is there a way to create a button on my 404 page that when clicked takes the user to the page of the broken JSON?
Solution
You can catch params and states with $rootScope
, $stateChangeStart
app.run(function($rootScope, SpinnerService) {
$rootScope.$on('$stateChangeStart', function(evt, toState, toParams, fromState, fromParams) {
console.log("$stateChangeStart " + fromState.name + JSON.stringify(fromParams) + " -> " + toState.name + JSON.stringify(toParams));
if(toState.name === 'errorPage'){
toParams.latestState = fromState;
}
});
})
Create a state which includes your error page. And add state action which is working with latest params and latest state.
$stateProvider.state('errorPage', {
templateProvider: function ($timeout, $stateParams) {
return $timeout(function () {
return '<button ui-sref="'+$stateParams.latestState+'"></button>'
}, 100);
}
})
You can do that with template, controller, templateUrl, controllerProvider or storing the latest variable inside $rootScope.
There is a lot of way to do it. I think read this article carefully https://github.com/angular-ui/ui-router/wiki
Answered By – hurricane
Answer Checked By – Marilyn (AngularFixing Volunteer)