angularjsdata-bindingangular-servicesisolate-scopeone-time-binding

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:

Is there a good way to return data from an object in service , without the reference to the actual object?


Solution

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