Maintain the current states when returning to a previous point in time

In my Angular app, I have multiple pages that allow users to make changes such as opening tabs and pills, modals, etc. For instance, if a user opens a modal and then clicks a link within that modal that takes them to another page, I want the original page to be displayed when they navigate back in their browser history. This means keeping the modal open instead of resetting the page.

I am currently using ui-router with Angular 1.4.3.

Although I have explored resources like:

...they do not fully address my specific need. I am uncertain about how to search for a solution to this issue effectively.

Another scenario is when a user enters a query in a search bar, clicks on a result that leads to a new page, and upon returning, they have to re-enter the search term. This can be frustrating for users.

javascriptangularjsangular-ui-router

Answer №1

Utilize a Dedicated Service for Storing Page State

Instead of cluttering the $scope with page state and user input, opt to store them in a persistent service that can be injected into the page controller alongside the $scope.

Create a reference to the service within the $scope:

myApp.service('MyPageStateService', function() {
    this.someProperty = 'some initial state';
});

myApp.controller('MyPageController', function($scope, MyPageStateService) {
    $scope.state = MyPageStateService;
});

Then, access the stored data from the persistent state service in the page template:

<div ng-controller="MyPageController">
    <p>The current state of my page is {{state.someProperty}}</p>
</div>

Upon returning to the page within the app, the controller will receive a new $scope, but it will retain the same instance of MyPageStateService.

Answer №2

For a solution to maintain consistent navigation, consider utilizing sticky states. These states offer more than just forward/back functionality.

If you only want this behavior for forward/back actions, one approach could be executing $stickyState.reset('...') during $stateChangeStart, excluding the adjacent state from the reset process.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What sets apart initializing an Express app using "app = new Express()" compared to "app = express()"?

Throughout my experience, express apps have always been initialized like this: var express = require('express') var app = express() However, today I came across an example where a new operator was used: var Express = require('express&apos ...

javascriptexpress

Utilizing Angular UI-Router for Efficient Multiple Named Views Management

Desired Functionality Working with AngularJS and the Angular UI-Router. I aim to enable two child states to share a parent state. The child states should populate a ui-view in the parent state's view with their own content. One of the child states ...

angularjsangular-ui-router

Having trouble loading my script in the frontend plugin?

After much testing, I have discovered that when I place this code before the get_header() function, the script is successfully loaded. However, when I move it after the get_header() function, it no longer works as intended. It's important to note that ...

javascriptjquerywordpress

What is the best way to retrieve the value of a custom attribute from a dropdown list using either JavaScript or jQuery?

I have a dropdown list on a web form and I need to have a 'hidden' variable for each item in the list that can be retrieved using the onchange event on the client side. To achieve this, after databinding the dropdownlist, I am setting a custom at ...

javascriptjqueryhtmlasp.net

What is the purpose of using an img tag to retrieve a URL that is not an image?

Upon investigating a slow page load, I came across something interesting in the HTML: <img src="/ajax?action=askedAboutCookies" style="display:none" width="0" height="0" alt="" /> When the page loads, it sends a request but never receives a respons ...

javascriptjqueryhtmljson

How can I submit multiple dropdown menus when they are changed?

I recently added Four dropdown menus on my index.php page. <select name="filter_month" class="filters"> <option>Select a Month</option> <option value="1">January</option> <option value="2">February</optio ...

javascriptphpjquerymysqlajax

Having trouble with Axios communicating with the Scryfall API

Trying to fetch data with axios from this specific endpoint, but encountering unexpected errors: Oddly enough, the request returns data successfully when tested using Postman or a browser (GET request), but it's unresponsive otherwise. Here's t ...

javascriptnode.jsaxios

Improving basic collision detection using velocity-based 2D motion

Check out this CodePen demo where you can control the movement of the "player" square using arrow keys. You can also place a light by pressing the spacebar and the player is supposed to be prevented from crossing over the blue lines by getting pushed in ...

javascriptthree.jscollision-detection

Restrict the quantity of user responses with JavaScript

For this questionnaire, users are limited to selecting and ranking only 3 out of the 5 listed Social Apps. I am currently using questback to build the survey, but I require assistance in implementing a JavaScript condition. <table> <tr> & ...

javascript

Function not executed right away

One of the functions I have is called showLoading(). This function is responsible for displaying a spinner by adding a specific class to the body: function showLoading(){ //console.log("show loading"); loading = true; $("body").addClass("loadi ...

javascriptjquery

Refresh the view when the URL is modified

Utilizing angularjs alongside ui-router (using the helper stateHelperProvider) to organize views and controllers on the page. Encountering an issue where the views are not updating as expected. The relevant code snippet config.js app.config(function($h ...

javascriptangularjsangular-ui-router

Efficiently loading Angular modules using lazy loading with ES6 and systemjs.import

Currently, I am attempting to establish a base route and implement lazy loading for separate modules using angular resolve alongside system.load. My setup involves leveraging jspm in conjunction with the ES6 module loader. The configuration for the base r ...

angularjsjspmsystemjs

Locate a specific text within a complex array of objects and retrieve the objects that contain the match as

I have an array of objects named input as shown below. Each object in the array contains a property vertical of type string, an array called platformList, and a nested object named radar_metadata. I am looking to implement a search functionality where I c ...

javascriptreactjsarraysloopsobject

Does GIF animation operate on the same thread as JavaScript in all popular web browsers?

When my AJAX request is in progress, an animated GIF is displayed to show activity. However, I have noticed that the animation freezes while the response from the request is being processed by a script that heavily updates the DOM. After researching this ...

javascriptajaxanimated-gif

The functionality for the "OnChange" event in the <html:select> field does not seem to be functioning properly

My JavaScript function isn't functioning properly. I can't see any alert messages on my webpage. Can someone please assist me? Below is my HTML code function checkProjectStatus() { alert("Helloo"); var dropdownType = document.getElementById( ...

javascripthtml

The server mistakenly sent the resource as a Stylesheet even though it was interpreted differently

Dear Fellow Coders, Could anyone lend a hand? I encountered this issue on my website after uploading it to my FTP: "Resource interpreted as Stylesheet but transferred with MIME type text/plain" </head> <body> <div class= "navbar navbar ...

javascriptjqueryhtmlcss

What is the best way to extract values from this PHP script?

I recently delved into the d3 javascript library and successfully created a scatter plot chart that pulls random values from an array. Below is the code snippet: <!DOCTYPE html> <meta charset="utf-8"> <head> <script type="text/ja ...

phpjavascriptrandomd3.js

Incorporate HTML into FormControlLabel with Material UI

In the project I am working on, there is a need to customize a checkbox using FormControlLabel. The requirement is to display the name and code of an item one above another with a reduced font size. Attempts were made to add HTML markup to the label or use ...

javascriptmaterial-ui

The $route.reload() function seems to be ineffective in Internet Explorer

I'm currently using AngularJs to develop an application. The issue I am encountering is related to data not being refreshed in IE, even after executing the $route.reload() function. Strangely enough, this problem only occurs in Internet Explorer and w ...

javascriptangularjsangular-routingangularjs-ng-route

Difficulty in displaying title on navbar using ionic

I've been grappling with a challenge in angular and ionic where I can't seem to display any title in the navbar. My setup is quite intricate, involving multiple nested views. Here's the list of states: state('app', { cache: fal ...

angularjsionic-frameworkangular-ui-router