Efficient methods for transferring information between a main and pop-up page within angularjs

On my webpage, I have a button that opens a popup page. I need to figure out a way to transfer json data from the main page to the popup page. These two pages are running separate angular applications.

Once the data is transferred, it will be updated based on user interactions and then sent back to the main page. I came across a solution on Stack Overflow that involves attaching the data to the $window object in the parent page's controller when launching the popup. The data is then assigned to the scope of the popup and finally sent back to the $window.opener object in the popup's controller for access by the parent page.

While this method works, I am curious if there is an Angular-specific approach that utilizes services for passing data between the two applications. I found a reference to sharing a single service between multiple AngularJS apps at this link. However, I'm searching for a cleaner and more direct solution that does not heavily rely on the $window object within the controllers. My goal is to create a shared service that facilitates data transfer between the parent and popup pages without depending too much on external objects like $window.

Answer №1

Here's how I tackled the situation:

  1. Within the controller of my parent page, I implemented the following:

    function ParentCtrl($scope, window){
        window.parentScope = $scope;
        window.open(childPageURL, params);
    }
    
  2. In the controller of my child page:

    function ChildCtrl($scope, window){
        var sharedData = window.opener.parentScope.someData;
    
        //Code that modifies sharedData
    
        window.opener.parentScope.someData = sharedData;
        window.opener.parentScope.$apply();
    }
    

This approach is functioning well for me. Ideally, I would have preferred to encapsulate the logic in a Service that both controllers could interact with and exchange data through.

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

AngularJS: Pause the data binding functionality temporarily

How can I temporarily deactivate data binding in AngularJS? I am working with a list called items that is being displayed using ng-repeat. I need to perform some operations on this list without immediately updating the page, as this could cause slowdown. ...

increasing the size of the JSON object

I have a function that is being called multiple times utilizing jQuery to fetch different JSON data from an API. My aim is to calculate the total count of a specific portion of the JSON retrieved. Below is an example of what I currently have: getTheData( ...

The ajax code is failing to retrieve the data from the table and populate it in the

hi guys i have an issue on ajax. where ajax can't work to take the data of second rows. This's code in model function getdtbarang($barcode = FALSE) { if ($barcode === FALSE) { $query = $this->db1->get(&a ...

Display all items that contain a specified string using JavaScript

I'm in need of some assistance with a problem that I've been struggling with. I have several JavaScript objects containing different data pieces as shown below:- Object {id: 1, shopcounty: "cornwall", shopaddress: "the cycle centre,<br />1 ...

Tips for streaming AWS Lambda response in nodeJS

I have a serverless AWS Lambda function that I need to trigger from my Node.js application and stream the response back to the client. Despite searching through the official documentation, I cannot find a straightforward way to achieve this. I am hoping to ...

Conflict between Laravel API route and root directory of the web server was encountered

I've been working on a Laravel website where I integrated AngularJS4 successfully. However, I'm now encountering an issue with conflicting API routes and routes defined in the web. The code in my web.php file looks like this: Route::get('/ ...

Utilize AngularJS to Access Global JavaScript Variables

I recently encountered a situation where I needed to incorporate some dynamic functionality into a website I was building. This led me to AngularJS, which I decided to integrate into certain parts of the site rather than the entire thing. Within my JavaSc ...

`Express.js Controllers: The Key to Context Binding`

I'm currently working on a project in Express.js that involves a UserController class with methods like getAllUsers and findUserById. When using these methods in my User router, I have to bind each method when creating an instance of the UserControlle ...

AngularJS and Gulp: Enhancing Static Assets with Revisioning

I have implemented the gulp-rev module to re-vision static assets in my source files. It generates new file names for CSS, JS, and HTML files by appending a hash code to it. Before : app.js After : app-2cba45c.js The issue I am facing is that in my An ...

How to prevent the collapse action when clicking a button inside a div in Bootstrap 5 using data-bs-toggle

My div contains a data-bs-toggle attribute along with buttons. https://i.sstatic.net/RzagX.png When clicking on the panel, it collapses. However, I do not want this collapse event to trigger when clicking the buttons. Is there a way to control this behav ...

Utilize the JavaScript .send function to pass an array

Can an array be passed to a PHP page using the code below? If not, what modifications are needed in the code? function ajax_post(){ var hr = new XMLHttpRequest(); hr.open("POST", "get_numbers.php", true); hr.setRequestHeader("Content-type", "a ...

Using JavaScript to assign multiple classes to a function at separate intervals

I'm trying to add two classes to a JavaScript function, but I'm encountering some issues. When I try to add both classes in the same line, only one of them works. However, if I add each class on separate lines within the function, only the second ...

AngularJS encountered an error following a successful GET request

I'm attempting to retrieve data from the server using this code snippet. $scope.get_file_list = function() { delete $http.defaults.headers.common['X-Requested-With']; //We don't want OPTIONS but GET request $htt ...

Using this.setState in ReactJS removes filters

Hey everyone, I've been struggling with a technical issue for the past few days and would really appreciate any hints or solutions. The problem lies in creating a table using the material-table library. Specifically, I need to extract the docID and do ...

Maintaining accurate type-hinting with Typescript's external modules

Before I ask my question, I want to mention that I am utilizing Intellij IDEA. In reference to this inquiry: How do you prevent naming conflicts when external typescript modules do not have a module name? Imagine I have two Rectangle classes in different ...

What is the best way to activate an alert or swal function just once instead of repeatedly?

I am just starting to learn Angular. Currently, I have an application that contains two variables related to the status of financial transactions. These variables are: tab1TrxMessage, which holds any important messages, and tab1TrxStatus that indicates wh ...

What is the best way to incorporate a fresh array into the existing array element stored in local storage?

I stored a group of users in the local storage: let btnSignUp = document.getElementById("btnSignUp"); btnSignUp.addEventListener('click', (e) => { let existingUsers = JSON.parse(localStorage.getItem("allUsers")); if (existingUsers == null ...

Navigating a path and executing unique functions based on varying URLs: A guide

I am trying to send a post request to the path /users and then right away send another post request to /users/:id. However, I need the actions to be different for each of these URLs, so I cannot use the array method to apply the same middleware. The goal ...

Abort S3 file upload using ASW-SDK

Is there a way to abort an upload without raising an error Upload aborted. when calling upload.abort()? import { PutObjectCommandInput, S3Client } from '@aws-sdk/client-s3'; import { Progress, Upload } from "@aws-sdk/lib-storage"; cons ...

What is the best way to display "SUCCESS" on the console when a launch is successful, and "ERROR" when it is unsuccessful?

Here is the question: I am delving into Node.js using the Puppeteer library, and I am looking to output "SUCCESS" in the console upon a successful execution, and "ERROR" if it fails. However, I am struggling to grasp how to achieve thi ...