What is the best way to send information to a different controller in my scenario?

I'm currently working on pulling HTTP request data from a factory, processing it in a parent controller, and then passing it back to the factory for my child controller to access.

This is what I have so far:

Parent Controller

myFactory.makeApi(id)
            .then(function(data) {
                //process data here...
                //I want to pass productDetail back to my factory and let 
                //my child controller use it 
                $scope.productDetail = productDetail;
            })

Child Controller

//I want to retrieve the productDetail using the parent's $scope.productDetail.
//but I'm not sure how to do it.
 myFactory.getProductDetail ???

myFactory

service.makeApi = function(id) {      
        return getProduct(id)
            .then(function(httpObj) {
                return httpObj.data;
            })

    }

  var getProduct = function(id) {
       return $http.post('/api/product/getProduct/' + id) 
  }

Essentially, I'm struggling with passing the productDetail to my child controller. Any help would be greatly appreciated. Thank you.

Answer №1

From the main controller, you have the ability to broadcast a 'datareceived' event like so:

  $scope.broadcast("datareceived", data);

In the child controller, you can then receive this data with the following code:

  $scope.$on("datareceived",function(data){
  //perform actions here 
 })

In your specific scenario, you can implement the following:

Main Controller Code

        myFactory.makeApi(id)
        .then(function(productDetail) {
            //process data here...
            //Pass productDetail back to the factory for use in child controllers
            $scope.productDetail    = productDetail
            $scope.broadcast("datareceived", productDetail);
        })

In the child controller:

   $scope.$on("datareceived",function(data){
     //perform actions here
   })

Answer №2

When referring to a parent and child controller relationship, it typically signifies that the views are interconnected in a hierarchical manner.

In this scenario, the child controller inherits properties from the parent controller's scope, allowing you to access them within the child controller using $scope.productDetail.

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

Obtain component choices through a plugin

Within the settings of my component, there is an option called "my_plugin". <script> export default { ready () { // ... }, my_plugin: 'test' } </script> My goal is to access the value of 'my_plugin' w ...

Using an AWS API Gateway, an HTTP client sends a request to access resources

I have a frontend application built with Angular and TypeScript where I need to make an HTTP request to an AWS API Gateway. The challenge is converting the existing JavaScript code into TypeScript and successfully sending the HTTP request. The AWS API gat ...

Using Passportjs for user authentication with Angularjs (resource/http get)

I am currently experimenting with integrating Passportjs into an Angular and Express project. My current focus is on testing the Facebook strategy in passportjs. While authentication appears to be successful, I am encountering an issue where it does not n ...

There seems to be a problem with the external JavaScript file not functioning

After dragging and dropping the .js file into my ASP.NET project, I am facing an issue where it remains unresponsive, even though the code works fine when used inline. This problem is occurring while using VS 2017. Here is a snippet of my code: <scrip ...

How can one stop users from navigating away from a webpage using the back button on their browser?

1) I'm currently exploring options to display a confirm pop-up when a user tries to leave a page using the browser's back button. It seems that the unload event does not trigger in this scenario. My application is built using angular2. I have att ...

Confirming user credentials for every page

I am currently working with an HTML page that includes front end PHP for server side scripting. One issue I have encountered is the configuration page, which can be accessed by disabling JavaScript in Mozilla settings. My current validation method relies ...

The div is obscured by the background image

Could someone please assist me in preventing the .background image from overlapping with the skills div when the viewport expands either vertically or horizontally? I've tried several approaches without success. Any help would be greatly appreciated! ...

The function parseFloat in Javascript can be used to subtract two numbers, returning an integer value

Apologies for the inconvenience, but I could really use some assistance. I attempted to convert a string into a decimal and was successful, although I encountered an issue: number = document.getElementById("totalcost").innerHTML; //String that rep ...

Having trouble with JSFIDDLE not functioning properly on my website

I'm having an issue with implementing a JSFIDDLE on my web form. The fiddle itself is working perfectly fine, but for some reason, I can't get it to work on my page. Can someone please help me figure out what mistake I might be making? Here is th ...

Troubleshooting AngularJS: Why does a basic $scope console.log() statement return undefined

I'm attempting to create a basic console.log() from this $scope: <div ng-controller="CustomerController" id="customer-block"> <h3>Customer Information</h3> <div class="col-md-4"> <label>Address 1:</label&g ...

Endless loop in XMLHttpRequest()

I am trying to use Ajax in the code snippet below to continuously retrieve a PHP query result until it reaches "6". The code seems to be functioning correctly, but once the result is "6", the script does not stop running. Instead, my CPU fan starts making ...

Enhance the appearance of rows in a table by adding a captivating marquee effect to those with

I'm working with a table that has 7 rows and 2 tabs for Sunday and Monday. The row corresponding to the current time is highlighted in red. I wanted to know if it's possible to add the following <marquee>My first Row</marquee> effe ...

What is the best way to use console.log for passing parameters in an AJAX request?

Is there a way to properly utilize console log in this scenario? $.post("greeting", { salutation: console.log(5 + 6), name: "Friend" }, I am facing issues when trying to pass the result to the ajax param salutation. Any suggestions on how to resolve this ...

Setting up a React Package by reinstalling a git repository

While immersing myself in learning React JS, I decided to create a git repository containing React components that could be exported and used or installed as a package in a separate React application. I developed some UI Components in a git repository and ...

What is the method for copying table data, including input text as cells, to the clipboard without using jQuery?

I have a basic table that looks like this: <table> <thead> <tr> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>Savings <button type="button" (click)=" ...

Facing issues with Handsontable opening within a jQuery UI dialog?

After implementing the Handsontable plugin in multiple tables, everything appears as expected on the parent page. However, when attempting to open a dialog containing a table, the tables do not display properly (only in IE). A demonstration of this issue c ...

Utilize v-for to dynamically showcase a variety of images on your

My goal is to showcase several JPG pictures located in the src/assets/images folder by utilizing the v-for directive. However, it seems like the browser is having trouble locating them. Interestingly, manually adding the pictures with the same paths works ...

Navigating through the features of www.addthis.com is simple and straightforward

I am looking to integrate the addthis.com plugin into my website. Specifically, I want to pass my own data to the plugin when users click on the email link. This data should then be sent to the client. Is there a way to achieve this? ...

Inability to input text into a textbox with AngularJS

I am currently working on developing an AngularJS app. I have encountered a problem where I am unable to input text into a textbox. The issue lies with my zoomService which handles zoom increments and decrements. While the user can zoom using a slider and ...

Exploring the Depths of React Native Navigation

I am facing an issue with navigating between two screens in React Native. I have tried multiple codes but haven't been successful so far. The error message I am getting is 'undefined is not an object (RNGestureHandlerModule.State)'. As a beg ...