Parent controller was not in command before Child执行

When working with a parent view and a child view, I encounter an issue with accessing a json file. In the parent view, I retrieve the json file using the following code:

    $scope.services = Services.query();

factory('Services', function($resource) {
  return $resource('/services/:serviceId', {
    serviceId: '@_id'
  }, {});

Initially, everything works fine as I can display the content of the json file in the view using ng-repeat. However, problems arise when trying to access the child view directly or refreshing the page. Despite being able to show the content in the view, I face difficulties using the file in the child controller. To troubleshoot this issue, I added the following code snippet to the child:

if($scope.services){ // in both cases it's not null
  var s="";
  if($scope.selectedService)
  s="NO refresh an NO direct access";
  else
  s="refresh or direct access";

  console.log(s);
  console.log("data : " + $scope.services);
  console.log($scope.services.length);
  console.log($scope.services)
}

The output reveals some inconsistencies that lead me to believe the child controller may be executing before the parent controller. How can I resolve this problem?

Answer №1

In this scenario, the issue likely arises from the parent calling $resource, which introduces a delay due to its asynchronous nature in fetching JSON via an HTTP request.

While this delay is ongoing, the child controller will start executing.

You can confirm this by including a console.log statement in the parent controller:

console.log("Starting Services.query()");
$scope.services = Services.query();

At that point, you'll observe that the parent controller runs before the child controller.

To address this, adjust the logic within the child controller so it doesn't rely on $scope.services being available when the controller is initialized.

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

How do I automatically redirect to a different URL after verifying that the user has entered certain words using Javascript?

I want to create a function where if a user input on the "comments" id matches any word in my FilterWord's array, they will be redirected to one URL. If the input does not match, they will be redirected to another URL. The checking process should onl ...

Enhancing Website Functionality: How to Swap iFrame for DIV using PHP and AJAX

I am currently working on a website where I need to replace an iframe containing data stored in an invisible form with a div that updates its content using AJAX. If you don't want to read everything, skip to the end for my main question. The chall ...

Vue fails to detect changes in an Array

Hey everyone, I'm currently working on a Vue project and I have been attempting to create a recursive tree from a flat list. My goal is to toggle the expanded property of each item when clicked, but for some reason, it's not updating. The issue ...

MongoDB failing to store model information

As I dive into practicing with APIs to hone my skills in creating models and routes, I find myself stuck on getting my initial route to successfully save data to my MongoDB database. When testing with Postman, I encounter the following error: { "message" ...

Is it possible to conceal the contents of a details tag without using a summary tag?

I'm looking for a way to hide the details tag without the summary. In my code, the summary is only visible when a condition [isvisible == false] is met. However, even when the summary is not visible, the details keyword is still shown and I want to hi ...

Passing a function into the compile method in AngularJS: A comprehensive guide

I have created a directive called pagedownAdmin with some functionality to enhance the page editor: app.directive('pagedownAdmin', ['$compile', '$timeout', function ($compile, $timeout) { // Directive logic here... }]); ...

Mocking a named class-export in TypeScript using Jest

I have a node module that exports several classes, including one called Client, which I utilize to create clients with various APIs as methods. I'm currently attempting to test my module, which has a dependency on this node module, using Jest. Howeve ...

Express and Passport encounter a Bad Request Error message

I've created a simple express API that utilizes passport.js for authentication: const express = require("express"); const app = express(); const LocalStrategy = require("passport-local").Strategy; const passport = require("passport"); passport.use( ...

Changing Angular 2 web app code to Ionic 2 mobile app code?

I currently have a web application code that was written using Angular 2. My goal is to create a hybrid mobile application by utilizing Ionic 2 for the same web application. Since Ionic 2 incorporates core concepts of Angular 2, I have a few questions: Is ...

Using Ionic 3 to create a list view that includes buttons linked to the items clicked

I need assistance with modifying the button icon in a list layout: <ion-list inset *ngFor="let audio of event.audios; let i = index"> <ion-item> <div class="item-text-center item-text-wrap"> {{audio.fileName}} </div& ...

What methods can I use to modify strings within JSX?

Within a JSX file, I am faced with the task of manipulating a particular string in a specific manner: Imagine that I have the following string assigned to medical_specialty = "Plastic Surgery" The objective is as follows: medical_specialty.replace(&apos ...

Integrate yaml-loader into the i18n settings of a Vue-CLI 3 project

After diving into the Vue-i18n library and exploring this tutorial, I successfully incorporated tags in json format within my project created with vue-cli. While browsing through the documentation, I noticed an example using yaml instead of json. However ...

Using three.js to retrieve the camera's position using orbit controls

In my journey using three.js orbit controls, I have encountered a challenge of making a skybox follow the camera's position. Despite scouring the internet, I have not come across a suitable solution. My query is straightforward - how can I obtain the ...

Fetching the URL for the Facebook profile picture

Utilizing satellizer for authentication in a MEAN application. Once the authentication process is complete, I aim to retrieve the user's profile picture. Below is the code snippet that I am using: Angular Controller (function(){ 'use strict ...

Can a Vue app be created as a standalone application?

Can a Vue application be created without requiring Vue as a runtime dependency? For example, rather than having the browser load vue.js and the app like this <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src= ...

What is the best way to showcase the information stored in Firestore documents on HTML elements?

Currently in the process of designing a website to extract data from my firestore collection and exhibit each document alongside its corresponding fields. Below is the code snippet: <html> <!DOCTYPE html> <html lang="en"> <head> ...

Manage the Cancel button functionality in Safari/Chrome when dealing with the Open in App Store pop up

Is there a way to manage the Cancel button on the Open in App prompt when redirected from Safari/Chrome to the AppStore? The situation is as follows: A user is prompted to download the app via a browser link. Upon clicking the link, it determines whether ...

Accordion Box glitch detected in Firefox browser

I have been working on a JavaScript function that controls a slide up/down box. However, I've encountered some issues with Firefox as the box only opens and closes once before failing to work properly again. Upon further investigation, it seems that F ...

Having difficulty retrieving items from Mongoose-Node database

I am currently working with a Mongodb database that stores resume objects. These objects contain various skills information and I have set up a node-express server to query the database based on specific skills. For example, when querying for a skill like ...

A beginner's guide to integrating Socket.io with Express.JS using the Express application generator

Currently, I am attempting to utilize Socket.io alongside Express.JS by using the Express application generator. While searching for solutions, I came across some helpful advice on how to achieve this (check out Using socket.io in Express 4 and express-gen ...