Rejuvenating controllers in AngularJS with stateProvider when page is refreshed

There is a state in my code that links to a different page and a different controller. Here's how it looks:

.state('productEdit', {
                url: '/productEdit/:id',
                templateUrl: '/App/Main/views/products/editProduct.cshtml',
                controller: 'app.views.products.editProduct',
                controllerAs: 'vm'
            })

The issue I'm facing is that when I navigate to this page or refresh the linked page, the controller doesn't initialize again. As a result, the variables get "stuck", even after clearing the cache.

I've implemented ui-sref in the following manner:

          <div ng-repeat="product in vm.products" class="col-lg-4 col-md-4 col-sm-4 col-xs-4" >
                <a ui-sref="productEdit({id: product.id})">
                    <div style="padding:5px">
                        <div class="card-product">
                            <h4>
                                {{product.name}}
                            </h4>
                            <p>
                                {{product.description}}
                            </p>
                        </div>

                    </div>
                </a>
             </div>

Does anyone have suggestions on how I can ensure that the controller reloads every time the page is reached?

javascriptasp.netangularjsangular-ui-router

Answer №1

It appears that you are using ui-router, as per the documentation you have the option to provide additional configuration to ui-sref. In your situation, it should look something like this:

<a ui-sref="productEdit({id: product.id})"  ui-sref-opts="{reload: true}">
                    <div style="padding:5px">
                        <div class="card-product">
                            <h4>
                                {{product.name}}
                            </h4>
                            <p>
                                {{product.description}}
                            </p>
                        </div>

                    </div>
                </a>

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

Passing arguments from the command line to an npm script

The scripts section in my package.json is currently set up as follows: "scripts": { "start": "node ./script.js server" } This allows me to use npm start command to initiate the server. All working well so far. However, I ...

javascriptnode.jsnpm

Cookie parsing functionality in Node JS malfunctioning

Currently, I am working through a tutorial on cookie management in Express JS found at . The goal is to implement cookies in my web application to authenticate requests to an API that I am constructing with Node JS. To set the cookie upon user login, I emp ...

javascriptangularjsnode.jscookies

Encountering an error with Angular-NG8001 due to an unknown element. Any suggestions on how

I am encountering an issue with my Angular project. The project structure I am working with can be found here: app structure. Within my app.module.ts file, the code appears as follows: import { NgModule } from '@angular/core'; import { BrowserMod ...

javascriptangularcomponents

Finding the iframe document on Chrome

I've been attempting to dynamically adjust the height of an iframe based on its content, but I'm facing issues in the latest version of Chrome. In Chrome, 'doc is undefined' error is showing up. Surprisingly, everything works perfectl ...

javascriptgoogle-chrome

Validate User Input Using jQuery to Check if Empty or Deleted

Users can enter text into an input field, and an image will be displayed if the input is valid or invalid. I want to remove or change the image when the input field is empty. Despite writing the following code, it doesn't seem to work: $('#inpu ...

javascriptjqueryhtml

Utilizing D3.js v4 to showcase a JSON file on a map

I am attempting to create a map similar to the one created by Mike Bostock. You can access my JSON file (here), which represents Europe divided into NUTS 2 regions. The structure of the JSON file is as follows: { "type": "Topology", "objects": ...

javascriptjsoncsvd3.jschoropleth

Doubt surrounding the behavior of Node.js when a file is required that does not export anything from a module

My understanding of Node.js' require() function and module.exports is high-level, but I still find some behaviors confusing. Imagine I have two simple one-line files named a.js and b.js. In a.js: require('./b.js'); and in b.js: console. ...

javascriptnode.jsmodule

Can a client-side React component or application be hosted on a server-side Express route?

Currently, I have a Node/Express backend that utilizes Pug.js to render various server-side routes for a basic, static website. In React.js, I have developed an interactive "builder" component through CRA, enabling visitors to configure products interacti ...

javascriptreactjsexpresspugcreate-react-app

Having trouble with adding data from an array of objects to an HTML element using jQuery's each method

I am currently facing an issue with looping through an array of objects using $.each in jQuery and trying to append the values to an <li>. Here is the relevant jQuery code: $(".sidebar").empty().append("<div>" + "<h5>Student Info</ ...

javascriptjqueryhtmlarraysjson

Using React to implement MUI autocomplete feature alongside a MUI form

Recently, I have been utilizing a MUI form structured in the following manner: <Box component="form" onSubmit={event => { return handleSubmit(event); }} noValidate sx={{mt: 1}}> <TextField margin="normal" ...

javascriptreactjstypescriptreact-hooksmaterial-ui

The concept of JavaScript context within unidentified functions

I am trying to assign a function as a property of each element in an array and then call it with different arguments. My initial approach was to use an anonymous function like this: for ( var i = 0; i < object_count; i++ ) { objects[i].callback = f ...

javascriptscopeanonymous-function

What is the method for smoothly transitioning the vertical flip of an image within its current position using CSS?

Can someone help me figure out how to smoothly flip my image vertically using rotateX after a few minutes at its center position? The image is flipping, but not on its actual center. It seems to be rotating from a point above the image. I've tried adj ...

javascripthtmlcssbootstrap-4

As I embarked on my journey into node.js, I encountered some stumbling blocks in the form of errors - specifically, "Uncaught ReferenceError: module is not defined"

Embarking on my Node.js journey, I am delving into the world of modules. After ensuring that both node and npm are correctly installed, I will share the code below to provide insight into the issue at hand. Within my project, I have two JavaScript files - ...

javascriptnode.js

Encountering the issue of receiving an undefined value when attempting to define a {string} parameter within the "when" section of the step

As a novice in the world of protractor with cucumber, I am faced with the challenge of automating a process where inputting a first name, last name, and postcode creates a new user. In order to achieve this, I have attempted to define the data entry within ...

angularjsangularautomationprotractorcucumber

What is the best way to separate a table column into a distinct column at the specified delimiter count?

I successfully wrote code that splits the third column into new columns at the slash delimiter. However, I am struggling to modify it to split at the nth (i.e. 2nd) occurrence. I couldn't find a solution online, so I'm reaching out here for help ...

javascriptjquery

Disabling font-awesome checkboxes

As someone who is new to front-end technologies, I am trying to achieve the following. Despite my efforts to find a solution, I have not been successful so far. Here is the issue I am facing-- I have two master checkboxes labeled 1) I do not like numbers ...

javascripthtmlcsscheckboxfont-awesome

Having trouble accessing properties of null (reading 'split'). Please provide a valid prompt

Hey there, I could really use some assistance with an issue I've encountered. Whenever I try to click on "cancel" in a prompt, I keep getting this error message: "Cannot read properties of null (reading 'split')". Basically, all I want is ...

javascriptarraysnullprompt

Issue with Ajax communication to PHP script causing data not to be sent

I am developing a web application that functions as an extensive form which will later be converted into a PDF document. Upon submission of the form, all input data is sent to a PHP file where they are stored as variables to be included in the PDF. Some of ...

javascriptphpajax

Issue with Jest Testing: React Fragment Not Being Rendered

Currently, I am facing an issue while testing components related to rendering the rows within a material-ui table especially when using React Testing Library. To create the table rows of a material-ui table, I am utilizing react fragments to iterate throug ...

javascriptreactjsjestjsmaterial-uireact-testing-library

I'm having trouble with my React Router Dom Redirect path. Everything seems to be set up correctly, but for some reason, it's not directing my home page

I have been working on adding a private route to my main dashboard, which is my home page, to make it accessible only to authenticated users. I created a new component called PrivateRoute and set up the redirection to the login page if the user is not auth ...

javascriptreactjs