AngularJs Services with isolated scope

Question

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?

Answer 1

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);
   });
 }
}