The Angular JS Root scope is modified after submitting a form

I'm new to Angular JS and I'm trying to figure out how to save an object into $rootScope in my application. However, when I try to make a post request without including the object from rootScope, it doesn't work as expected.

Now, on a newly opened page, I want to access that object from rootScope. But, from what I understand, after a full redirection, rootScope loses its state or I might be missing something :)

In general, is there a way to store variables in rootScope without losing them after a full refresh? Or do I have to pass them with each request from one page to another?

Thanks!

P.S.: I am not using ng-view and I'm looking for an alternative solution without ng-view...

javascriptangularjsangularjs-scope

Answer №1

If it's available, you might need to utilize the browser's local storage.

Answer №2

It seems to me that you are seeking a solution involving a Factory. It can be achieved through the following code snippet:


    app.factory('myService', function() {
 var savedData = {}
 function set(data) {
   savedData = data;
 }
 function get() {
  return savedData;
 }

 return {
  set: set,
  get: get
 }

}

Answer №3

Aha, I understand now. Upon complete redirection, the application reinitializes all scopes on its own. This means there won't be any existing data carried over to the new scopes. To achieve this, we need to prevent the ng-app from refreshing and utilize ng-view instead. Alternatively, tools like web storage or cookies can also be used.

Thanks everyone!

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

Click on the window.location.href to redirect with multiple input values

I am facing a challenge with my checkboxes (from the blog label) and the code I have been using to load selected labels. However, this code seems to only work for one label. Despite multiple attempts, I have found that it only functions properly with one ...

javascriptjquerycheckboxinput

The jquery live click event is not functioning properly on iPad devices

I am experiencing an issue with a webpage that has the following code to bind click events <script type="text/javascript"> $(".groupLbl").live("click", function(e) { var $target = $(e.currentTarget); ..... $.getJSON("/somelink.js ...

javascriptjqueryipad

Utilizing document.write() for displaying markup content

I have an inline SVG stored as a variable on my webpage and I am making some changes to it. How can I display viewText on the page (not the SVG image) with the modifications? What is the best way to make viewText appear on the page? For instance: ...

javascriptjqueryhtml

A guide on parsing a nested JSON file with ExtJS 4

Here is the content of my JSON file named "jobInfo.json": { "job": { "id": 1, "name": "Job 1", "description": "bla bla bla", "locations": { "type": "FeatureCollection", "features": [{ "id": 1, "t ...

javascriptjsonextjsextjs4openlayers

What is the proper method for submitting a mail form via AJAX without using jQuery?

Currently, I am working on integrating a PHP mail form with AJAX. The aim is to create a straightforward form that collects user information such as phone numbers and sends it to my email address. While I have managed to set up the form to send emails usi ...

phpjavascriptajaxformssubmit

Angular 2: Testing Firebase Add Functionality with Unit Tests

Is there a way to perform a basic unit test in Angular 2 for testing a simple firebase adding item feature? I've opted for typescript over standard JavaScript in my code. This is the piece of code I want to test: export class AppComponent { r ...

javascriptunit-testingtypescriptfirebaseangular

Receiving data from multiple sockets in Node.js with Socket.io

I recently started working with Node.js to develop an online game that acts as a server-side application. This application serves the .html and .js files to the client while managing the game's logic. I'm utilizing Socket.io for communication bet ...

javascriptnode.jssocketsnpmsocket.io

What causes my React app menu to unexpectedly open while simply updating the state without any CSS modifications?

In the Header component, there is a button that triggers the toggleNav function in context.js when clicked. This function changes the state of isNavOpen from false to true, resulting in the opening of the navigation. Surprisingly, there doesn't appear ...

javascriptreactjs

Django's Implementation of Real-Time WebSocket Notifications

Currently, I am encountering an issue while integrating web socket notifications into my Django project. The problem arises when attempting to pass the user's unread notification count to them. To address this challenge, my initial solution involved ...

javascriptpythondjangowebsocket

Resolving the CORS preflight issue with Loopback API in Redux

My current setup involves a client application running on React-Redux and an API app on Loopback. During local testing, I have the client app on port 8080 and the server app on port 3000. While attempting to test Google OAuth (using the loopback-passport ...

javascriptreactjscorsreduxloopbackjs

Troubleshooting: Issues with AngularJs directive expression ID and ng-pattern functionality

When using a form input directive with ng-pattern, an error is displayed when the ID on the directive is a string. However, it fails to display the error when the ID is an expression. See the examples below: Example with working ID <form name="myForm" ...

angularjsexpressionng-pattern

Configuring timezone for 'date' type in Plotly.js

I'm currently working on a graph to showcase the trend over time. The data I have is in Unix format and I use JavaScript code (new Date(data)).toUTCString to display it in my title. Surprisingly, while the data for the graph and the title is the same, ...

javascriptdatetimezoneplotly

The URI entered is not valid: The parsing of the hostname failed. Electron Builder

Having an issue while trying to build an electron app using squirrel, even though the iconUrl is valid. Here is my package.json configuration: "squirrelWindows": { "iconUrl": "http://95.85.39.111:5005/skylog.ico" }, Error message received: An unhand ...

javascriptnode.jselectronelectron-builder

Developing a calendar with limited availability for selecting future dates and restricting the ability to choose past dates

I am currently working on creating a calendar in Vue.js that allows users to select dates only from the current day up to the next 30 days. Dates prior to the current date are disabled, as well as dates beyond the initial 30-day period. While I have exper ...

javascriptvue.js

The loading of angular.min.js.map fails in Ionic

While running my Ionic app in the iOS simulator and using the Safari Web inspector, I encountered the following error: file:///.../.../Application/.../myApp.app/www/lib/ionic/js/angular.min.js.map Failed to load resource: The requested URL was not found o ...

angularjsionic-framework

Creating an array with user-selected objects in IONIC 3

I've been attempting to separate the selected array provided by the user, but unfortunately, I'm having trouble isolating the individual elements. They are all just jumbled together. My goal is to organize it in a format similar to the image lin ...

javascriptangularjsionic-frameworkionic3

Having trouble with understanding the usage of "this" in nodejs/js when using it after a callback function within setTimeout

It's quite peculiar. Here is the code snippet that I am having trouble with: var client = { init: function () { this.connect(); return this; }, connect: function () { var clientObj = this; this.socket = ...

javascriptnode.js

Tips for dividing the AJAX response HTML using jQuery

I have a piece of code that is functioning properly. However, I am having trouble splitting the HTML response using AJAX jQuery. I need to split it into #div1 and #div2 by using "|". Could you please provide a complete code example and explanation, as I am ...

javascriptphpjqueryhtmlajax

Errors encountered while starting Angular due to issues in package.json configuration

Summary: Encountered an error while using 'Angular' for the first time, indicating tsc was not found in the package.json file. Details: As a beginner with Angular, I followed an example from a book and attempted to start it with np ...

javascriptnode.jsangularnpmraspbian

Achieving enlightenment with Satori in NextJS: Transforming SVG to PNG in a NodeJS Environment

I am currently exploring the capabilities of satori and integrating it into my next.js api routes. (I'm unable to utilize the vercel/og package). While I have successfully set everything up, I'm facing a challenge in converting the svg image gen ...

javascriptnode.jssvgnext.jsbuffer