In my Angular app i have a service, that stores a Configuration structure, that is used by various components of my app. In the .run
-phase that guiConfigService
reads the configurations from a .json
file by the function setGuiConfig
and is able to return data for a certain component by the function getGuiConfig
:
myApp.factory("guiConfigService", ['$http', function($http) {
var guiConfig = {};
var self = {
setGuiConfig: function (callback) {
guiConfig = {"Functions" : {
"FunctionIds" : [
"3",
"5",
"10",
"last_entry"
]
}};
if (undefined !== callback) {
callback(guiConfig);
}
},
getGuiConfig: function (buzzword, callback) {
callback(guiConfig[buzzword]);
}
}
return self;
}]);
My Problem:
In the controller of my component i want to be able to manipulate whatever i get back from the getGuiConfig
function of my service, let's say, i want to remove the last entry of the attribute FunctionIds
. This manipulation does not only affect the object in my cotroller, but also manipulates the guiConfig
-Object in my Service.
function MyCtrl($scope, guiConfigService) {
var configData;
$scope.getNewGuiConfig = function() {
guiConfigService.getGuiConfig('Functions', function(data) {
configData = data;
// this does not only affect `configData`, but also the
// `guiConfig`-Object in guiConfigService:
configData.FunctionIds.splice(-1);
});
}
}
See this JsFiddle for example.
What I tried already:
guiConfig
Object by JSON.parse(JSON.stringify(guiConfig[buzzword]))
is working but does not seem to me like the right way to do.Is there a good way to return data from an object in service , without the reference to the actual object?
All the services are singleton in angular.So you can make a copy of config data in your controller and modify it accordingly. According to me you should use constant service to store your app configurations and always make a copy of your configurations when you want to manipulate them using angular.copy().
function MyCtrl($scope, guiConfigService) {
var configData;
$scope.getNewGuiConfig = function() {
guiConfigService.getGuiConfig('Functions', function(data) {
configData = angular.copy(data);
configData.FunctionIds.splice(-1);
});
}
}