Failure to pass parameters between different states

There is a situation where clicking on a link should change the route and send some parameters to another state.

The problem arises when the parameters appear to be empty when logged in the other state.

<div ng-repeat="items in vm.Items">
    <a ng-click="vm.goToDetails(items.id)">{{items.title}}</a>
</div>

Controller:

 vm.goToDetails = function(Id) {
     $state.go('Details', {
          'fid': Id
     });
 }

Route:

  $stateProvider.state('Details', {
    url: '/details/:fid',
    resolve: {
        selectedProduct: ['$state', '$stateParams',
            function($state, $stateParams) {
                console.log($stateParams.fid) //empty string returned
                console.log($state.params.fid) //undefined returned
            }
        ]
    }
 });

Any assistance on this matter would be highly valued and appreciated.

Answer №1

Ensure to include the parameter name in the route URL: /some-route/:fid

Answer №2

The code appears to be error-free. It is possible that the issue lies in the injection of the resolved parameter.

I have created a demonstration using your code, which could be beneficial for you.

Below is the configuration:

app.config(function($stateProvider, $urlRouterProvider){

$stateProvider.state('Details', {
url: '/details/:fid',
templateUrl: 'detail.html',
controller: 'DetailController',
resolve: {
selectedProduct: ['$state', '$stateParams',
function($state, $stateParams) {
console.log($stateParams.fid) // receiving empty string here
alert($stateParams.fid) // receiving empty string here
return $stateParams.fid
}
]
}
});

$stateProvider.state('login', {
url: '/login',
templateUrl: 'login.html',
controller: 'LoginController'
});

$urlRouterProvider.otherwise('/login');

});

The controller with a duplicated object is as follows:

app.controller('LoginController', function($scope, $state){

$scope.Items = [{id: 1, title: "Title1"}, {id: 2, title: "Title2"}, {id: 3, title: "Title3"}]

$scope.goToDetails = function(Id) {
console.log(Id)
$state.go('Details', {
'fid': Id
});
}

})

This is the controller where you can inject selectedProduct:

app.controller('DetailController', function($scope, $state, selectedProduct){
$scope.selectedProduct = selectedProduct;
})

Feel free to explore the DEMO here

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

What could be the reason why my useRouter function isn't working as expected?

I'm currently working on developing an App using nextjs 13 and the new App router feature (https://nextjs.org/blog/next-13-4) : I've encountered a navigation issue despite following the documentation diligently. To illustrate, here's a bas ...

Discover how to transform the ist date and time format to est with the power of angularjs

I need to transform the date from 5/3/2018 to Mon Mar 5 01:54:07 EST 2018 format using angularjs before sending it to the backend. ...

Place a cookie on the alternate language domain

Within my website, we utilize 2 distinct domains, each dedicated to a different language. www.mysite.com en.mysite.com I am interested in implementing JavaScript to establish a cookie on en.mysite.com when clicking a link on www.mysite.com. Here is my ...

Merge array and object destructuring techniques

What is the correct way to remove a value from an array? const ?? = { text: ['some text'] }; ...

Method for extracting URL parameters while utilizing a hash within the URL

I've been exploring AJAX with hash in URL using prototypejs. Consider the following URL: http://example.com/#/example/104?v=0&d=a&rpp=10 print_r( $_GET ); // output: array() However, when I try this URL: http://example.com/example/104?v= ...

Guide on how to forward the response obtained from an Ajax call to a different HTML page

I am working with a mongoose database that stores data containing an individual's first and last name. The user inputs their first name into a field, triggering an ajax request sent to the file named controller.js. This file generates a JSON response ...

Error: The message is not being displayed in the Angular Controller

Having recently started working with Angular/Bootstrap, I've implemented a Contact Form on my website that utilizes an Angular controller for an AJAX call to a PHP file to send an email. Although the functionality is mostly successful - the AJAX call ...

creating a while loop in node.js

In C#, the following code would be used: double progress = 0; while (progress < 100) { var result = await PerformAsync(); progress = result.Progress; await Task.Delay(); } This concise piece of code spans just 7 lines. Now, how can we ...

Angular: How to Determine a Date that is After the Current Time

As I embark on transitioning a project from rails to angular, it feels like a daunting task. How can I convert this <% if souporder.datefrom > Time.now %> into an Angular-friendly format? Here is my updated code snippet: <tr ng-repeat="sou ...

Tips on reversing a numeric value with scientific notation in nodeJS

Exploring the optimal method to reverse an integer (positive and negative) in NodeJS 12 without the need to convert the number to a string. This solution should also accommodate numbers written in scientific notation such as 1e+10, which represents 10000 ...

intricate pattern matching tool for Angular

Can someone help me create a regular expression that can validate input in the format "S19/999999/090"? I need the input field to accept this specific type of input where the first character is an uppercase letter from A to Z, followed by two digits from 0 ...

Adjust the dimensions of the dropdown menu

Objective: How can I adjust the width of a select dropdownlist that is utilizing bootstrap v2? Challenge: I am uncertain about how to modify the width in the context of bootstrap. Additional Information: Keep in mind that there are three dropdownli ...

Add a static line of names to a JavaScript file

Looking for a way to generate data with the following javascript snippet: for (var l = 0; l < table.length; l +=1) { fs.appendFile('results/Test'+ username +'.csv', var1+i, var2 , function(err) { if(err) { return c ...

Converting lists to JSON format in a C# web form

Utilizing JSON.stringify, I have implemented textbox autocomplete for a web-form that suggests city names based on user input. The goal is to retrieve relevant city names from the database and display them as suggestions in the autocomplete feature after t ...

Is it possible for me to convert a .map array into a comma-separated array enclosed in double quotation marks?

I am attempting to extract data from a group of twig variables and convert them into a javascript plugin. The data consists of dates listed in an array format. Initially, they are displayed on the template as a string like this: {"date":"2018-08-30, 2018- ...

Expression enclosed in double quotes within a JavaScript string

Our company has encountered an issue with an FTL that involves a link with JavaScript functionality. The problem arises when the value contains an apostrophe, causing the link to break. To address this, we utilized the js_string method to solve the issue. ...

Node.js: Promise chain abruptly stops after reaching a predefined limit without causing any errors

Currently, I am attempting to perform a straightforward operation in nodejs using promises. My task involves working with an array that consists of objects. These objects contain query parameters for a URL that I need to access through a GET request. As th ...

JavaScript code for client-side implementation using Node.js

As I work on developing a web application, I encounter the need to interact with an API that lacks JSONP/CORS support. Initially, my solution was to establish a server with PHP code and utilize ajax calls. However, my discovery of this node module offers ...

What is the proper placement for index.html <head/> class helper functions within a ReactJS Component?

My custom helper functions are stored in a JavaScript file called classie.js: ( function( window ) { 'use strict'; function classReg( className ) { return new RegExp("(^|\\s+)" + className + "(\\s+|$)"); } var hasClass, ...

The function update in chart.js is not available

I encountered an issue while trying to update my chart. When I clicked the button, an error message popped up saying TypeError: pieChartData.update is not a function const LatestSales = props => { const {pieChartData} = props; const toggle ...