Danny Pranoto Danny Pranoto - 5 months ago 14
AngularJS Question

How do I pass an object data as a value (not as reference) using angularJS $broadcast

I'm trying to pass some

data
and
action
within two controllers by using AngularJS $broadcast event. But I'd problems with passing the data as a value (not reference).

What I've done so far is first I created a function that broadcast
sendCartPreview
event with an object of
shoppingCart
inside shopping-cart.controller.js

//function inside shopping-cart.controller.js
function sendCartPreview() {
var shoppingCart = $scope.shoppingCart;
$rootScope.$broadcast('sendCartPreview', shoppingCart);
}


Then I add a listener of the event on another controller which retrieve the shoppingCart data and pass the data value to
sendCartPreview
function inside the controller

//function inside chat.controller.js
$scope.$on("sendCartPreview", function(event, message){
sendCartPreview(message);
})


Basically the sendCartPreview function received the object data and added it to an array of message.

function sendCartPreview(shopping_cart) {
//some logic here and push the data to an array
vm.arrayOfMessage.push(shopping_cart);
}


The problem that I'm facing is whenever
$scope.shoppingCart
value changes, the value inside
vm.arrayOfMessage
also change according to the respective changes. What I want to achieve in the mean time is passing the data as a value (not by reference) so that everytime $scope.shoppingCart value changed, it will not affect the data inside vm.arrayOfMessage. How do I achieve that? Kindly need your help in this, any kind of help would be appreciated, thanks!

Answer

Make a deep copy call like sendCartPreview(angular.copy(message));