Adding a query parameter from the controller using UI router

Within my application, I have a parent state along with child states that belong to the parent. The parent state contains an optional parameter called reviewId. Currently, everything is functioning correctly - when I send the parameter in $state.go, the state opens as expected. However, I am looking to make a change when creating a new review (the reviewId is populated after a backend call).

Here is the URL for opening an existing review with the ID included:

http://localhost:3000/#/planning?reviewId=1000.

When creating a new review, the URL is:

http://localhost:3000/#/planning. After saving the review (with the ID populated), I want to append ?reviewId=newId to the URL without using state.go.

$stateProvider
            .state('root.planning', {
                url: '/planning?reviewId=',
                abstract: true,
                params: {
                    reviewId: null,
                    readOnlyMode: null,
                    locked: null,
                    editButton: null
                },
                reloadOnSearch:false,
                views: {
                    '@': {
                        templateUrl: 'src/app/modules/planning/views/planning.tpl.html',
                        controller: 'PlanningMainController as reviewvm'
                    }
                }
            })
            .state('root.planning.planning', {
                url: '',
                params: {
                    reviewId: null
                },
                data: {
                    planningChild: true,
                    stateTypeCd : "PLA"
                },
                reloadOnSearch:false,
                templateUrl: 'src/app/modules/planning/views/tabs/tab.planning.view.html',
                controller: 'PlanningController as planningvm'
            })

UPDATE

I also attempted to update the reviewId in stateParams after accessing the ID and then calling $state.reload(). However, with this approach, stateParams.reviewId is null after the reload. I am wondering if there is a way to achieve this without triggering a reload.

Answer №1

$stateProvider
.state('root.planning', {
url: '/planning?reviewId',
abstract: true,
controller: function($scope, $stateParams) {
$scope.reviewId = $stateParams.reviewId;
}

Invoke the function when $stateParams.reviewId is present. I trust this information will be beneficial to you.

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

When the width of the window is hidden, conceal

My webpage has a carousel with pictures, but on smaller devices, they do not appear properly. I am now trying to figure out how to hide the div if the width is less than 1015px. Here is the code for my div: <html> <body> <div id="myCarou ...

Tips for increasing visibility for your Google Analytics Embed API Custom Components

I recently tried to incorporate some code I found at the following link: After downloading the files view-selector2 and date-range-selector, I saved them in my local directory. I made a modification to the code: var accountSummaries = require(['&ap ...

What is the reason for this basic callback running before the setTimeout function?

Interesting behavior is observed in this code, where 'output 2' is logged before 'output 1' due to the setTimeout function. const func1 = () => { setTimeout(() => { console.log('output 1'); }, 3000); }; con ...

`Switching between two buttons: A guide`

Here is the codepin: https://jsfiddle.net/magicschoolbusdropout/dwbmo3aj/18/ I currently have a functionality in my code that allows me to toggle between two buttons. When I click on one button, content opens and then closes when clicked again. The same b ...

iOS is not receiving JSON data in the response headers

I am currently utilizing the CocoaHTTPServer for establishing my server connection. However, I encountered an issue with retrieving JSON data in the header file of my HTML page (web client). Here is the code snippet : HTML Page : endAPSession: funct ...

Utilizing AngularJS to selectively filter objects based on specific fields using the OR operator

My collection includes various items with different attributes. For instance, here is the information for one item: {"id":7,"name":"ItemName","status":"Active","statusFrom":"2016-01-04T00:00:00","development":"Started","devStartedFrom":"2016-01-04T00:00:0 ...

Error Occurred: ngRepeat directive encountered an invalid expression while attempting to render the

HTML <tr ng-repeat="sale as examples"> <td class="text-right"> @{{sale.sales_person}}</td> <td class="text-right"> @{{sale.sales_total}}</td> <td class="text-right"> @{{sale.sales_target_amount}}</td> ...

Developing an Angular template component integrated with Express JS backend

I'm encountering an issue while attempting to load a template file from one of my folders in Angular. I have my JS files statically called with Express, however, the template files are not loading. I have tried placing them in the views folder along w ...

I have to display a pop-up message box after selecting an option from a dropdown menu that fulfills a set of conditions

I am attempting to display a pop-up message when a selection is made on a dropdown menu that meets specific criteria. The dropdown list is generated from a coldfusion output query. I am relatively new to JavaScript, so I may be missing something in my code ...

Navigating through web pages and creating dynamic interfaces is made simple

As someone relatively new to React, I am currently exploring how to integrate React Router with Material UI. In my Layout file, I have implemented a Navigation drawer from Material UI with the menu on the left and content on the right, as depicted in the ...

What is the best way to sequentially invoke an asynchronous function within an Observable method?

Presently, I have the following method: public classMethod( payload: Payload, ): Observable<Result> { const { targetProp } = payload; let target; return this.secondClass.secondClassMethod({ targetProp }).pipe( delayWhen(() ...

Updating deeply nested document in Mongoose

Is it possible to change the value of array1.array2.status, according to the schema provided below? const SomeSchema = new mongoose.Schema({ status: Boolean, array1: [{ array2[{ status: boolean }] }] }) ...

Looking to preserve the "ALL" selection in a JavaScript-CSS filter?

On the front page, there are approximately 16 posts displayed along with a filter featuring 4 drop-down menus showcasing post categories. I have assigned category names as classes to each post div and am currently using javascript to hide them. The code s ...

Can a div with float: left; be centered?

Currently, I am attempting to create a dock (similar to the iOS dock) for my website. Below is the full code that I have implemented: function addPrevClass(e) { var target = e.target; if (target.getAttribute('src')) { // check if it is img ...

Is there a way to personalize the header outline of the mui-material datagrid?

Can someone help me modify the appearance of the Mui Datagrid outline to something different than its default setting? I'm having trouble uploading my code. Are there any reference materials or sample code snippets available for this modification? ...

The issue of data not being passed to the controller when using AngularJS $resource on localhost

I have configured a spring/mongoDB backend that functions as a REST Api: GET on http://localhost:8080/articles will return an array of JSON (all articles) GET on http://localhost:8080/articles/:articleId will retrieve a single JSON (one article) For exam ...

Employ the power of a static force layout to forge an intricate web of connections within the realm of

I have found a great network that works really well. It automatically updates the node position when the size of the window changes. Now, I want to make it fixed. What I mean by this is that I want to compute a certain number of ticks (let's call it ...

Dealing with TypeScript errors TS2082 and TS2087 when trying to assign an Away3D canvas to a variable

As a beginner with TypeScript, I am in the process of creating an Away3D scene where a canvas element is dynamically generated and needs to be appended to a container. Although the code functions correctly, I am encountering the following compilation erro ...

Using Django with Ionic and ng-Cordova for efficient file transfer

Working on an exciting project with an Ionic hybrid app, I've come across a challenge regarding the feature of taking/choosing a picture and uploading it to the server. While there are numerous examples available for using the $cordovaFileTransfer plu ...

Retrieve a result from a setTimeout function

Can someone assist me with storing the status value in a variable named 's'? Any help would be greatly appreciated. Below is the code snippet: let s = setTimeout( ()=>{ this.matchService.getMatches().subscribe(ms => { this.match ...