LocalHorst LocalHorst - 4 years ago 113
AngularJS Question

AngularJs Services with isolated scope

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:


  • First I thought, the problem is me calling a callback-function and not returning the object directly, but I tried and it does not seem to work either.

  • Sending a copy of my Service's
    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?

Dev Dev
Answer Source

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);
   });
 }
}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download