Sharing a copied object between AngularJS controllers

Question

Sharing a copied object between AngularJS controllers

I'm facing an issue in my AngularJS project where I can't share copied object data between different controllers.

While I can successfully share data by setting properties in code, copying the object seems to cause a problem.

In the provided code snippet on JSFiddle, you'll find two objects named User and OriginalUser. Upon loading the FirstCtrl, I copy the contents of User into OriginalUser.

Although the value assigned to User object in FirstCtrl is accessible in SecondCtrl, the data within OriginalUser is only available in FirstCtrl.

To see this behavior firsthand, visit the live demo on JSFiddle Code Sample

javascript angularjs

Answer 1

Answer №1

The reason for this issue is that instead of updating the OriginalUser data, you are creating a new variable using the angular.copy function.

What you actually need is to use angular.extend, which will copy the user properties to the original user object. This way, both controllers will be using the same object instance.

In your first controller:

function FirstCtrl($scope, User, OriginalUser){
    $scope.user = User;
    $scope.o_user = angular.extend(OriginalUser, $scope.user);
}

Your fiddle has been updated accordingly.

Answer 2

The reason for this issue is that instead of updating the OriginalUser data, you are creating a new variable using the angular.copy function.

What you actually need is to use angular.extend, which will copy the user properties to the original user object. This way, both controllers will be using the same object instance.

In your first controller:

function FirstCtrl($scope, User, OriginalUser){
    $scope.user = User;
    $scope.o_user = angular.extend(OriginalUser, $scope.user);
}

Your fiddle has been updated accordingly.

Sharing a copied object between AngularJS controllers

Answer №1

Similar questions

How about "Can I use JavaScript with wget?"

Ways to determine if the mouse is positioned at the bottom of a div area

Strategies for adjusting image components based on various screen sizes

Completing online form text entries in WebView without the need for identifying elements

I'm having an issue with my Bootstrap tabs - they seem to be unresponsive when clicked

Jquery results in an error and causes CSS elements to become stuck

Setting a value in the selectpicker of rsuitejs involves assigning a specific value to the

What is the reason that when a variable is embedded within another variable, its value remains anchored to its initial declaration?

Creating a React lightbox feature where users can click on the first image and view it, but the subsequent images are displayed as empty

Following the modification of the Context root, the JSP page is no longer functioning as expected

Adding the output from a promise to an array

Is it possible to update my services list based on which checkboxes I choose to uncheck at the top?

What is the best way to transfer a boolean value from a cshtml file to a javascript function or constructor?

"Utilize the addEventListener function in combination with the 'for' keyword to

New HTML5 feature: using the input type duration in forms

Incorporate various variables within a JavaScript loop

Change the value of a particular property in an array of objects by utilizing an inline function

Utilizing jQuery's .load() method to import a scripted section from one page into another

VueJS can manipulate an inline template by dynamically changing its content and reinitializing

What is the best way to utilize useRef on a component that is not accessible within React BigCalendar?