How to pass parameters down through nested views in Angular UI-router?

Trying to implement nested views loading inside parent views using state children, but unsure if the approach is correct.

Progress so far:

$stateProvider
.state('splash', {
    url: '/splash',
    templateUrl: 'system/templates/splash.html',
    controller: ""      
}).state('home', {
    url: '/',
    templateUrl: 'system/templates/home.html',
    controller: ""      
}).state('user', {
    url: '/user/:user?',
    templateUrl: 'system/templates/user.html',
    controller: "userController"
}).state('user.data', {
    views: {
        "@vdata" : {
            templateUrl: 'system/templates/user.html',
            controller: "userController"                
        }
    }
})

The parent state "user" correctly receives :user?, but when navigating through $state.transitionTo();, I receive the response of

Param values not valid for state 'user.data'. There is an unnamed view with the pattern

<div ui-view></div>

set as the parent. In the user template, there is a nested ui-view called "vdata". According to the documentation, targeting @vdata should load requested pages there.

How can I make the nested view inherit parameters from the parent view?

Answer №1

Utilize the resolve method to inject the user on the controller. This will ensure that the resolved references are shared between parent and child states.

$stateProvider
.state('splash', {
    url: '/splash',
    templateUrl: 'system/templates/splash.html',
    controller: ""      
}).state('home', {
    url: '/',
    templateUrl: 'system/templates/home.html',
    controller: ""      
}).state('user', {
    url: '/user/:user?',
    templateUrl: 'system/templates/user.html',
    controller: "userController",
    resolve:{
        user: function($stateparams){
          return $stateParms.user;
        }
    }
 ....

Make sure to inject the user in the usercontroller.

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

Discovered a few JSON logical operators within a Chat API - curious to learn how they operate

In the process of incorporating a user chat feature into my personal project, I came across an API that includes the following JSON code snippet. While I can identify it as JSON, I'm struggling to fully comprehend its functionality. Can someone please ...

Steps for adding a delete icon to a text input field and enabling the functionality to delete text

In the code snippet below, I am creating a text input field: <input type="text" class="signup-input text-value" name="" placeholder="e.g. <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2d48554c405d41486d">[email pro ...

JS Nav Dots are not activating the Active Class

I have been utilizing a code snippet from this source to incorporate a vertical dot navigation feature into a single-page website. The navigation smoothly scrolls to different sections when a link is clicked, with an active highlight on the current section ...

When hosted, OpenCart encounters a JavaScript error stating that the property "document" cannot be read because it is null

After successfully running opencart on my local machine, I encountered some errors upon uploading it to the hosting/server. The specific error message is as follows: Uncaught TypeError: Cannot read property 'document' of null f.each.contents @ j ...

Ways to implement two functions within a single onclick event

Is it possible to call two functions with onclick event? <input id = "test" onclick="func1()"> Can I add another function as well? How would I go about doing that? ...

Unravel the base64 encoded message from JavaScript and process it in Python

I'm currently facing an issue in Python while trying to decode a string sent by jQuery. Although I am not encountering any errors, I receive an encoding error when attempting to open the file. My objective is to decode the string in order to save it ...

Struggling to make the JavaScript addition operator function properly

I have a button that I want to increase the data attribute by 5 every time it is clicked. However, I am struggling to achieve this and have tried multiple approaches without success. var i = 5; $(this).attr('data-count', ++i); Unfortunately, th ...

Having difficulty implementing dynamic contentEditable for inline editing in Angular 2+

Here I am facing an issue. Below is my JSON data: data = [{ 'id':1,'name': 'mr.x', },{ 'id':2,'name': 'mr.y', },{ 'id':3,'name': 'mr.z', },{ & ...

OrbitControls in THREE.JS fail to function properly when a DOM Element is layered on top of the scene

I am attempting to position labels as elements with position:absolute; over a THREEJS scene. The issue arises when the mouse hovers over one of the labels (the red box in the example below), causing the events that trigger OrbitControls to be "halted" by t ...

"Troubleshooting cross-domain issues with iframes in Internet Explorer

My application is built with angularjs and we offer the option to embed it on other websites. Everything works well in IE11, but when the application is iframed onto a different domain's website, it stops working. I've tried adding <meta htt ...

Packager freezing after running npm audit and the component directory is nonfunctional

Greetings, To begin with, I would like to acknowledge that this issue may have been addressed in previous posts, but despite following suggestions on Stack Overflow and GitHub, I am still facing two specific problems. Here are the issues I am encounterin ...

Determine the dimensions of an image using JavaScript without the need to actually load the image

Hello everyone, I'm having trouble finding the height and width of an image file using Javascript. I don't need to display the image on the page, just extract its dimensions. I've tried the code below, but it seems to be returning height an ...

Using either AngularJS's simple .then method or the $q service to handle asynchronous requests

I'm trying to understand the distinction between AngularJS $q service and simply using .then() after an asynchronous request. For example, using .then(): function InboxService($http) { this.getEmails = function getEmails() { return $http.get(& ...

Determine the position of a nested object within a multidimensional array using JavaScript/TypeScript

My objective is to obtain the complete index of a complex object within a multidimensional array. For example, consider the following array: var arr = [ { name: "zero", children: null }, { name: "one", children: [ { ...

The data points on the Google Maps heatmap are not visible

We are working on developing a server side application that will utilize the Google Maps API to create weighted heat maps for visualizing data. Check out the Google Maps API documentation for Heat Maps here Despite successfully displaying the map, my Jav ...

Step-by-step guide to populating a JavaScript array with AJAX requests

Having some trouble with populating a JavaScript array using an Ajax request. Here is the code I'm working with. The Ajax portion seems to be running smoothly. function GetColumns() { var customArray = []; $.ajax({ url: '@Url.Con ...

The screen reader seems to be malfunctioning as soon as I include this particular code

//Finding the height of the header let headerHeight = document.querySelector('header'); let height = headerHeight.offsetHeight; //Adjusting the #navbarNav's top margin to accommodate the header let nn = docu ...

Importing modules in Node can be done after the code has been executed, or through ESM Dynamic

I am currently working on a project in nodejs and express, and I am facing an issue where I need to execute certain code before importing modules. The app is already set up to use import for modules instead of require, and changing this setting is not an o ...

What is the reason behind combining all states into a single location in Redux, even if they are not globally accessible?

As a newcomer to React and Redux, I have found them to be quite enjoyable when used together in a small sandbox application. However, as I consider larger applications, I can't help but question why Redux stores the entire application state in a singl ...

Using jQuery to add a class to an input option if its value exists in an array

Looking for a way to dynamically add a class to select option values by comparing them with an array received from an ajax call. HTML <select id="my_id"> <option value="1">1</option> <option value="2">2</option> ...