Unable to pass parameter in ngRoute

When I pass /?preview=true in my function and catch it in app.js with $route.current.params.preview, it appears to be undefined when outputting to the console log. Can someone please assist me in resolving this error?

Below is blah.js which will navigate to

http://localhost:9000/?preview=true
.

    var buildLangPathUrl = function () {
        return LANG_PATH ? LANG_PATH + '/' : '/';
    };

    this.openFrontPageWithPreview = function () {
        $rootScope.openPage(buildLangPathUrl() + '?preview=true');
    };     

app.js

    $rootScope.$on('$routeChangeSuccess', function (user) {
        var path = $location.path();
        $rootScope.showIndex =
            path === LANG_PATH + '/';
        if ($rootScope.showIndex) {
            pageService.setPageMetaData('');
            if($rootScope.loggedUser) {
                console.log($route.current.params.preview); << 'undefined'
                if (!$route.current.params.preview) {
                    routeService.openSuggestedJobs()
                } 
            }
        }
    });

Answer №1

You have the option to utilize $location.search() as a setter or getter for the query parameters object.

Alternatively, you can use the $routeParams.search object.

if ($location.search().preview) {
// alternatively
if ($routeParams.search) {

Make sure to inject whichever method you choose to use.

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

Javascript menu toggle malfunctioning with sub-menus

I am in the process of creating a responsive menu for a complex website. The horizontal menu transitions into a vertical layout on smaller screens, with javascript used to toggle the sub-menu items open and closed when clicked. One issue I am facing is wit ...

Testing for packet loss using JavaScript

Do you know if there is a method in JavaScript to determine packet loss from the client side using AJAX, XMLHttpRequest, or any other approach? Your assistance is greatly appreciated. ...

Tips to prevent the return of undefined when a condition is not satisfied

I'm currently working on a react app and I have an array of objects (items) that I want to iterate over in order to display each object based on its index. I am using useState to set the index, which is updated when the user clicks a button. const ...

Analyzing and inserting elements into an array of objects

The following code aims to: 1) iterate through the two arrays, 2) if an item exists in both arrays, add its value to the value of the matching item in the first array, 3) if the item is found in arr2 but not in arr1, add the item to arr1. The code funct ...

The JS Fiddle code fails to function properly once it has been downloaded to the local computer

I came across a helpful example fiddle webpage: jsfiddle.net/yijiang/6FLsM/2 After following examples from others, I attempted to download (right click and Save As) using the latest Chrome browser with the following links: jsfiddle.net/yijiang/6FLsM/2/s ...

"The Vue.js/JavaScript object updates, but the changes are not being displayed in the document object model (DOM

Currently, I am endeavoring to iterate through an array of objects and display them as list items. There is a click listener that introduces a custom property to the object, and a class binding depends on the value of that property. Would you mind reviewin ...

Should Redux Reducer deep compare values or should it be done in the Component's ShouldComponentUpdate function?

Within my React Redux application, I have implemented a setInterval() function that continuously calls an action creator this.props.getLatestNews(), which in turn queries a REST API endpoint. Upon receiving the API response (an array of objects), the actio ...

Modify the CSS class of a customized component using a different component

Here is a small example illustrating my issue: https://github.com/lovefamilychildrenhappiness/AngularCustomComponentValidation The problem arises with a custom component that contains an input field. The formControl linked to this input field utilizes Val ...

"Displaying 'Object Object' as a title when hovering over an element

I am currently using an accordion element to display several FAQs on a webpage. The code snippet for the accordion with content is as follows: { Object.keys(FAQS).map((key, index) => { return ( <div key={key}> ...

Exploring the intricacies of JSON object retrieval

I'm currently working on a form that allows users to submit address details for a selected location. However, before submitting the form, I want to give the user the ability to preview the address that will be sent. The addresses are stored within a J ...

What is the process for generating a subpage within the main page without the need to navigate away from the primary

On my main page, I have a login button. Instead of redirecting the user to a new page, I want it to simply display a login box. You can see an example of this on medium.com when you click on 'sign in'. Is it possible to achieve this with only HTM ...

What is the best way to determine the file size using Node.js?

My current challenge involves using multer for uploading images and documents with a restriction on file size, specifically limiting uploads to files under 2MB. I have attempted to find the size of the file or document using the code below, but it is not p ...

Enhance Your React Progress Bar by Applying a Custom Class to Bars Exceeding 100

My goal is to add an additional class to the respective progress bar only if the count is greater than 100. Currently, the additional class is being applied to all progress bars instead of just the individual one. I have a handleProgressBar click handler ...

AngularJS Issue: The function 'FirstCtrl' is missing and is undefined

Currently, I am enrolled in the AngularJS course on egghead.io and have encountered an issue that seems to be a common problem for others as well. Despite trying various solutions found here, none seem to work for me. In the second lesson video, the instru ...

Can you create a single transition in an XState machine from each state?

Let's say I have a machine that has states from A to Z. If the machine receives the event { type: "END_OF_THE_WORLD" }, I want it to transition to state Z, regardless of its current state. Do I need to define this transition in each individual state ...

Tips for seamlessly transitioning <img src="..." /> using jQuery?

Currently, I am working on the following code snippet: $img.hover(function(){$(this).attr('src','1.jpg')},function(){$(this).attr('src','2.jpg')}); However, this is not providing a smooth transition as it takes a c ...

Events in d3.js are properly registered, however they are not being triggered as

After creating an enter section that transitions to set the opacity to 1, I encountered an issue where the 'click' event on the circle worked but not on the text. Interestingly, when I replaced the 'text' with a 'rect' and se ...

What is the correct way to set a function as the value for an object without using quotation marks?

I am facing a challenge of generating very large JavaScript files using Node.js. Each file contains a const variable that holds values tailored for the specific file, with these values only known at runtime. For example: 'use strict' const lib ...

Is there a comparable Javascript alternative to the Ruby gem "site_prism" for Page Objects design?

Is there a JavaScript framework for Protractor in NodeJS that provides a clean way to define Page Object Elements similar to site_prism? I've explored astrolabe but it doesn't quite meet the requirements. This is an example of how Page Objects a ...

Issue with Tailwind causing content to extend beyond screen with horizontal scrolling

I have a React-based NextJS application using Tailwind CSS. There is a page component that displays a list of individuals sorted from A to Ö (Swedish alphabet). In the mobile view, the user experience requires the list of alphabetical letters to be visibl ...