"Using angularjs's $location.search method results in an empty object being

I am trying to retrieve my URL querystring in AngularJS using the $location service, similar to this example. My URL looks like this - 

http://someDomain.com/create/index.jsp?queryToken=123abc

However, in my directive:

vm.queryParam = $location.search();
$log.log('vm.queryParam', vm.queryParam); //{}
vm.details.query = vm.queryParam.queryToken;
$log.log('vm.queryToken', vm.details.query); //undefined

Although I can see the parameter(s) when logging the $location object, it seems that the search() method is not working as expected. Can anyone suggest the correct way to extract them?

Thank you.

javascriptangularjsquery-string

Answer №1

This solution has been tested and proven effective. Give it a try:

var app = angular.module('myApp', []);
app.config(['$locationProvider', function($locationProvider){
$locationProvider.html5Mode({
  enabled: true,
  requireBase: false
  })
}])
 app.controller('myCtrl', function($scope, $location) {
 $scope.myPeram = "pass some value in url ?myParam=123";
var query = $location.search();
    if(query.myParam)
    $scope.myPeram = query.myParam;
    
});
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.20/angular.min.js"></script>

</script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
<span ng-bind="myPeram"></span>


</div>
</body>
</html>

Answer №2

To enable the use of $location.search() in your Angular application, make sure to activate HTML5 mode for routing by including the following line within your route definitions: 

$locationProvider.html5Mode(true);

If you prefer a more universal solution that works regardless of the HTML5 mode setting, you can always access the search parameters using: 

$window.location.search

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

Firestore - Using arrayUnion() to Add Arrays

Is there a way to correctly pass an array to the firebase firestore arrayUnion() function? I encountered an issue while attempting to pass an array and received the following error message: Error Error: 3 INVALID_ARGUMENT: Cannot convert an array value ...

javascriptfirebasegoogle-cloud-firestore

Before the async function, make sure to set the value using React's useState

Exploring the world of react context api for the very first time. Below is my react code utilizing the context api: const [valChanged, setValChanged] = useState(false); async function modalSave() { await setValChanged(true); // STEP 1 await o ...

javascriptreactjsasynchronousasync-awaitreact-context

Utilize AngularJS to transform images into base64 format

My project involves allowing users to upload their images and then converting them into a specific format before sending them to a .Net RESTful service. As I am new to AngularJS, I could use some assistance with this task. Any help would be greatly appre ...

angularjsimage-conversion

What is the best way to ensure that text fields remain hidden upon page load until the appropriate drop down option is chosen?

Is it possible to initially hide text fields and only reveal them when a specific drop down option is selected? The current JavaScript code somewhat achieves this, but I would like the input fields to remain hidden by default. <script language=" ...

javascripthtmljquery

Make sure to include the onBlur and sx props when passing them through the slotsProp of the MUI DatePicker

This DatePicker component is using MUI DatePicker v6. /* eslint-disable no-unused-vars */ // @ts-nocheck import * as React from 'react'; import { Controller } from 'react-hook-form'; import TextField from '@mui/material/TextField&a ...

javascriptreactjsmaterial-ui

Sharing AngularJs controllers between different modules can help streamline your

I'm facing an issue with trying to access an array from one controller in another controller. Despite simplifying the code for clarity, I still can't seem to make it work. Here is my first controller: app.controller('mycont1', [' ...

javascriptangularjsmodel-view-controller

The maximum property in a Mongoose schema does not have any impact or

const mongoose = require("mongoose"); const PostSchema = new mongoose.Schema( { user_id: { type: String, required: true, }, content: { type: String, max: 150, required: true, }, }, { timest ...

javascriptnode.jsmongodbexpressmongoose

Unable to redirect Firebase Hosting root to a Cloud Function successfully

Currently I am utilizing Firebase Hosting along with a Firebase.json file that is configured to direct all traffic towards a cloud function (prerender) responsible for populating meta and og tags for SEO purposes. { "hosting": { "public": "dist/pr ...

javascriptexpressfirebasegoogle-cloud-functionsfirebase-hosting

Utilizing Prototype in Node.js Modules

Currently, I am working on a project involving multiple vendor-specific files in node. These files all follow a similar controller pattern, so it would be more efficient for me to extract them and consolidate them into a single common file. If you're ...

javascriptnode.jsprototypecommonjs

What steps can be taken to resolve the vulnerability in webpack-pwa-manifest?

Looking for solutions to address the [email protected] and minimist vulnerability. I attempted removing node/modules and package-lock.json, followed by a fresh npm installation, but the issue persists. Any suggestions would be greatly appreciated. Scr ...

javascriptreactjsnpmwebpackminimist

Centered on the screen are the input field and corresponding label

I am in the process of creating a signup form, and I have encountered an issue. How can I make the input wider without using a fixed width like width: 420px? Additionally, I would like to center both the input field and the label. I envision something simi ...

javascripthtmlcssreactjsforms

The templateUrl directive with dynamic content

In order to showcase multiple popins using Angular on my homepage, I implemented the following: template1.html will appear as a popin. It worked after I corrected the .html file to display properly. <a class="vsn_alert-item-link" tooltip-special="tem ...

angularjsangularjs-directive

Dynamically loading an AngularJS controller

I am faced with the challenge of integrating an Angular app with dynamically loaded controllers into an existing webpage. Below is a code snippet where I have attempted to achieve this based on my understanding of the API and some research: // Create mod ...

javascriptangularjs

Discord.js version 13 encountered an issue where it is unable to access properties of undefined while

Having trouble with creating a warn system that just won't work! I've tried various solutions but nothing seems to be fixing it. Would greatly appreciate any help! Error Log: [FATAL] Possibly Unhandled Rejection at: Promise Promise { <reje ...

javascriptnode.jsdiscorddiscord.js

Mapping Store Fields to JSON Properties in ExtJS: A Complete Guide

I am working with a JSON data object that includes exchange rates information: { "disclaimer": "Exchange rates provided for informational purposes only and do not constitute financial advice of any kind. Although every attempt is made to ensure quality, ...

javascriptjsonextjsdata-binding

Tips for animating a nested array using jQuery

I have a border that is 9x9 with lines, columns, and squares, similar to a Sudoku border. I want to animate it, but I encountered some issues when trying to run multiple animations simultaneously. To solve this problem, I decided to animate one array of el ...

javascriptjqueryarraysanimation

Creating a CSS Grid with Scroll Snap functionality to mimic an iPhone screen in HTML

I have created an iPhone simulator using HTML. It's in German, but I can provide a translation if needed: // JavaScript code for various functionalities related to the iPhone interface /* CSS styling for the iPhone interface */ <meta name="v ...

javascripthtmlcssscroll-snap

Can a Jquery *compiler* be developed?

Upon encountering this informative question, the idea of creating a jQuery compiler crossed my mind. The concept was to design a tool that could translate jQuery code into raw JavaScript code for execution. In my imagination, the process of executing a bl ...

javascriptjquerycompiler-construction

Remove a row from a Jquery Jtable

I am running into difficulties when trying to delete rows, and I suspect that the issue might be related to the post[id] not being properly sent. Although the delete message appears, the row is not actually deleted. Below is the snippet of my code: JAVASC ...

javascriptphpjqueryjquery-jtable

Encountering the 404 Page Not Found error upon refreshing the page while utilizing parallel routes

I'm currently developing a webapp dashboard using the latest version of Next.js 13 with app router. It features a dashboard and search bar at the top. I attempted to implement parallel routes. The @search folder contains the search bar and page.jsx wh ...

javascriptreactjsnext.jsvercel