Updating the value of a global variable through dependency injection in AngularJS

One thing I consistently do is inject

app.constant('DOCUMENT_ID', window.documentId || 1);
into services, controllers, and directives.

I'm now looking to convert DOCUMENT_ID into a global variable. The goal is for any changes made to DOCUMENT_ID in a controller to be reflected in all services and controllers where DOCUMENT_ID was injected. How can I achieve this using a global variable?

Answer №1

Avoid using global variables in this scenario as it is considered a poor practice. Instead, take advantage of the fact that objects are passed by reference. One way to implement this is by creating a service like the following:

app.value('DOCUMENT', {
    ID: window.documentId || 1
});

By modifying DOCUMENT.ID, you can ensure that every part of your application will reflect the updated version of the ID. Just treat it like an object property.

Check out the demonstration here: http://plnkr.co/edit/Oay8IaLRnuCN2xkSuM69?p=preview

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

Using PHP to enhance a select statement to return data when paired with JavaScript

How can I post JavaScript with PHP to enable select statement return? I have a script that is currently functioning as follows: $.post('2.php', { id: 12345 }, function(data) { // Increment vote count, etc }); This is the content of my 2.ph ...

What is the best way to transfer the text from an input field into a paragraph when a button is

For a school project, I am developing a website focused on time management. My goal is to create an input text box that, when the "add task" button is clicked, transfers the text inside it to a paragraph or p2 element and then moves the input field down. ...

The functionality of the dynamic text box is disrupted when a form element is added

I am in the process of developing a form and am looking to create dynamic text boxes using Bootstrap. The code that I have currently works as expected: $(function() { $(document).on('click', '.btn-add', function(e) { e.preventD ...

Organize routes into distinct modules in Angular 6

Currently grappling with routing in my Angular 6 application. Wondering if the structure I have in mind is feasible. Here's what it looks like: The App module contains the main routing with a parent route defining the layout: const routes: Routes = ...

Is there a way for me to prevent a particular file from being cached by web browsers?

Is there a way to prevent Web Browsers from caching a particular file? For example: <img src="myImage.jpg" cache="false"></img> If possible, how can this be achieved? The code <meta http-equiv="cache-control" content="no-cache" /> ins ...

What is the reason behind the requirement in Javascript (ES.next) that a function must be declared as async in order to utilize await functionality?

Shouldn't a compiler or parser be intelligent enough to recognize when a function utilizes await, and automatically convert it to an async function? Why is there a requirement for me to explicitly type the async keyword? It just clutters the code, an ...

What is the reason behind the inability to send an object from the parent component to a child component within a Vue 3 application?

I've encountered an issue while working on a Vue 3 app involving a component and its <User /> subcomponent. Within App.vue: <template> <Navbar /> <Sidebar /> <Content title="Users" /> <Footer ...

Tips for ensuring an animation is triggered only after Angular has fully initialized

Within this demonstration, the use of the dashOffset property initiates the animation for the dash-offset. For instance, upon entering a new percentage in the input field, the animation is activated. The code responsible for updating the dashOffset state ...

Can someone please explain the functionality of "next()" in middleware and how it operates?

Currently, I am following a tutorial by Net Ninjas on node.js and attempting to create my own examples to solidify the concepts in my mind. For reference, I refer to the GitHub source code available on their profile. However, I have encountered an issue at ...

Node.js method convention - invoking self-defined functions

Consider a scenario where a Node module contains two functions, func1() and func2(). It is necessary for func1 to make a call to func2 during its execution. In order to test func2 independently, I have included both func1 and func2 in the exports by setti ...

Vuetify's V-alert component doesn't seem to close properly when the value property is updated, as it only displays the

I have a v-alert component that appears and disappears based on a Vuex store - it shows an error message and clears it after 4s! Below is the code for my V-alert component: The issue I am facing is that the :value attribute does not work when the value o ...

Decide on the javascript/jquery libraries you want to include

My app is experiencing slow loading times on the home screen and students using it from school district computers are running into ERR_CONNECTION_RESET errors due to strict firewalls. The excessive loading of javascript and jquery libraries in the head of ...

I am working with AngularJS and I am having trouble redirecting my pages from the main screen. I am implementing the ng-route module. Can you take a look at my code and provide feedback?

I have encountered an issue with my index.html code. I am unable to load login.html when clicking on the login button. <!doctype html> <html ng-app="instagram"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compitable" co ...

Continuously spinning loading icon appears when submission button is triggered

We are currently experiencing some issues with our mobile forms. Our users utilize a mobile form to submit contact requests, but the problem arises when they hit 'submit' - the loading icon continues to spin even after the form has been successf ...

Compiling TypeScript to JavaScript with Deno

Currently experimenting with Deno projects and looking for a way to transpile TypeScript into JavaScript to execute in the browser (given that TS is not supported directly). In my previous experience with NodeJS, I relied on installing the tsc compiler via ...

Activate animation upon scrolling to specific element using Material-UI

Currently building out a website using react and Material-UI, I am looking to enhance the user experience with some transitions. At the moment, I have a button set up to display a component, but I want it to show up when I scroll to that specific part of ...

Showing a 2D array in Jquery within an MVC environment - what's the solution?

I am in the process of building an MVC application. My goal is to transmit data from the controller and display it using JQuery. I have constructed an array in the controller and sent it to JQuery using Json. Here is the array... And here is the JQuery ...

AngularJS factory with local storage functionality

As a newcomer to IonicFrameWork, I decided to try out their "starter tab" template and made some tweaks to the functionality of deleting and bookmarking items from a factory. In my books.js file where the factory is defined, here's a snippet of what ...

Vanilla JavaScript // Conceal a div when the class of another div is modified

Note: I am unable to utilize jQuery, only vanilla JavaScript I am not very proficient in pure JS. Additionally, this time around, I cannot rely on any external resources such as jQuery. What I am looking for: If the div1 class is active, I want to hide ...

Vue: Conditionally display a division depending on v-if, excluding cases where the div returns null

Within my HTML, I have implemented conditional rendering using v-if <div v-if="showdiv"> <p>Content 1 appears here</p> </div> <div v-if="!showdiv"> <p>Content 2 appears here</p> < ...