The child state is failing to inherit the resolved dependencies from the parent state

Check out my code snippet below:

$stateProvider
        .state('admin', {
            abstract: true,
            templateUrl: "views/common/content.html",
            resolve: {
                channel: function($stateParams){
                    return $stateParams.id
                }
            }
        })
        .state('admin.dash',{
            url: "/dash",
            templateUrl: "views/admin/admin_dash.html"
       })

I have multiple controllers within the admin_dash.html view using ng-controller. However, I am encountering an issue where I am unable to inject 'channel' in any of these child controllers. The 'channel' is a resolved dependency of the parent state and should be inherited.

javascriptangularjsangular-ui-router

Answer №1

The resolve injectables in this scenario are not accessible to just any ng-controller; they are specific to the controller defined for the state.

For example:

$stateProvider
    .state('admin', {
        abstract: true,
        templateUrl: "views/common/content.html",
        resolve: {
            channel: function($stateParams){
                return $stateParams.id
            }
        }
    })
    .state('admin.dash',{
        url: "/dash",
        templateUrl: "views/admin/admin_dash.html",
        // This is where the injectable is used
        controller: function(channel, $rootScope) {
            console.log('Received channel from parent resolve:', channel);
            // In case ng-controller bound controllers are needed...
            $rootScope.channel = channel;
        }
    })

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 is the proper way to type a collection and put it into action?

I am looking for a way to create an object that mimics a set. Specifically, I want the transaction id to act as a key and the transaction details as the value. To achieve this, I created the following: type TransactionDetail = { [key: TransactionId]: Tra ...

javascriptreactjstypescript

IE7 z-index issue with incorrect stacking order

Visit this jsFiddle link. When using IE7, the code in the jsFiddle above shows the dropdown (.sbOptions) positioned beneath the next selectbox element (.sbHolder). Even though .sbOptions has a z-index: 100;, it is still being displayed under .sbHolder. ...

javascriptjqueryhtmlcssinternet-explorer-7

Refreshing the browser does not load the Angular2 component and instead shows a 404 error

During my exploration of Angular 2, I developed a basic restaurant management application. Now, I am delving into more advanced techniques such as creating an app bundle, minification, and optimizing the application. The authentication component in my app ...

javascriptangularroutes

Convert individual packages within the node_modules directory to ES5 syntax

I am currently working on an Angular 12 project that needs to be compatible with Internet Explorer. Some of the dependencies in my node_modules folder are non es5. As far as I know, tsc does not affect node_modules and starts evaluating from the main opti ...

javascriptangulartypescriptbabeljsecmascript-5

What is the best method for hashing CSS module class names in the latest version of Nextjs?

Is there a way to modify/minify/encrypt/conceal/obscure CSS class names in Next JS? I've attempted various methods, including referencing this discussion. Encountering the following issues while experimenting with this proposed solution: yarn bu ...

javascriptnode.jstypescriptnext.jsnext.js13

Obtain the following ten years following a specified value

Seeking the optimal method to determine the next decade after a given value in Javascript. For instance: If the value is 9, the next decade would be 10^1 For 200 it would be 10^3 And for 1001, it would be 10^4 This algorithm should also cater for n ...

javascript

Reposition the chosen item from the menu to the top spot

I currently have a top navigation bar with various menu items. $('.subpage_top_nav li').click(function(e) { e.preventDefault(); $(this).parent().prepend(this); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery. ...

javascriptjquery

Appending a JSON object to an array does not result in the object being added to the

Can anyone help me with an issue I'm facing? I have a code snippet where I am trying to push a JSON Object into an array, but the array is not updating properly. It only shows the last pushed element. var myData = {}; var id = 0; $("a").on('cli ...

javascriptarraysjson

ScriptManager.RegisterClientScriptBlock is failing to execute the already existing script

Background When a client-side button click triggers a server-side function, a loading panel (div) is displayed before the server-side function is executed. The loading panel should be removed once the server-side function completes. My Approach Upon com ...

javascriptc#asp.netscriptmanager

What could be the reason behind receiving an "undefined" message when attempting to access db.collection in the provided code snippet?

var express = require('express'); var GoogleUrl = require('google-url'); var favicon = require('serve-favicon'); var mongo = require('mongodb').MongoClient; var app = express(); var db; var googleUrl = new GoogleUrl( ...

javascriptnode.jsmongodbexpress

Modifying the hidden input value using JQuery

When using jQuery to change the input type hidden with dynamically appended buttons in the DOM, the code appears as follows: $("body").on('click', '.companyContractButt', function(){ var id = $(this).attr('data-id'); ...

javascriptjquery

What could be the reason for my jQuery files not being loaded?

I have included jQuery and Bootstrap in my header as follows: <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" href="https://maxcdn.b ...

javascriptjquerynode.jsexpress

What is the process of starting a mongoDB instance within a JavaScript class?

I have a DB class that is built with a mongoDB connection, but I am uncertain about how to initiate a db instance within this setup. import mongo from 'mongodb' import Grid from 'gridfs-stream' export default class Db { constructor ...

javascriptmongodbgridfs-stream

The Javascript function will keep on executing long after it has been invoked

I am currently facing an issue with calling a JavaScript function within an AJAX call. The progress function below is supposed to be executed every time the for loop runs. However, the problem is that although progress is being run as many times as the for ...

javascriptajax

Building charges with Stripe using Node.js

Having trouble with Stripe as I am not receiving any data inside the callback... Here is my server-side code: Stripe.charges.create( { amount: totalCostUSD, currency: 'u ...

javascriptnode.jsexpressstripe-payments

Displaying the size of a group in a tooltip with Highcharts Angular

Currently, I am utilizing dataGrouping to group data in my chart based on dates along the x-axis. My goal is to display the group size in the tooltip similar to what was shown in this example (click on "show more info," then open the sequence chart, wait f ...

javascriptangulartypescripthighchartstooltip

How come the instanceof operator does not function on Error subclass instances when using babel-node?

It has come to my attention that the instanceof operator is not functioning as expected on instances of subclasses of Error when using babel-node version 6.1.18 and Node version 5.1.0 on OS X. Why could this be happening? Interestingly, the code works perf ...

javascriptnode.jsecmascript-6babeljs

Executing a jQuery event after a div's background-image has finished rendering

Greetings and thank you for sparing a moment. I'm curious to know if there exists a method through jQuery to execute a function immediately after a background image in a div has completed downloading and rendering. Imagine you have the following div ...

javascriptjqueryhtmlcss

Generating multiple circles on Google Map using ng-maps

I have reviewed several similar posts on SO, but I am still struggling to figure out my mistake. My goal is to place multiple circles on a Google map using a JSON string setup like this: [ {"name":"0","lat":30.45,"long":91.15}, {"name":"1","lat": ...

angularjs

Is it possible to interact with a realm instance generated by a JavaScript code using a Java native module through the React Native bridge?

Utilizing Realm in my react-native application via the JavaScript API has been great for persisting user data. However, I now find myself needing to access this Realm instance from a native module (specifically the react-native bridge in Android) in order ...

javascriptjavaandroidreact-nativerealm