Is there a way to create a dismissible button that goes to the page where the 404 page was blocking?


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?


You can catch params and states with $rootScope , $stateChangeStart$rootScope, SpinnerService) {
  $rootScope.$on('$stateChangeStart', function(evt, toState, toParams, fromState, fromParams) {
    console.log("$stateChangeStart " + + JSON.stringify(fromParams) + " -> " + + JSON.stringify(toParams));
    if( === '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

Answered By – hurricane

Answer Checked By – Marilyn (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.