Why does this AngularJs Service with variable object name return an undefined object?

Question

Scenario:

I'd like to use this service to share some properties inside my webApp. This service should have some object inside and the controllers should be able to get and set those objects.

JS:

var oneApp = angular.module('myApp', ['ui.bootstrap', 'ngTouch', 'ngAnimate'])
  .service('sharedProps', function() {
    var anObjNameDest = '';
    var anObjPropName = '';

    this.progressBarDynTyped00 = {
      dynamic: 0,
      dynMultiplier: 10,
      max: 100
    };

    var progressBarDynTyped00 = {
      dynamic: 1000,
      dynMultiplier: 10010,
      max: 100100
    };


    var test = this.progressBarDynTyped00;

    var test2 = progressBarDynTyped00;

    return {
      getDynObject: function(anObjNameDest) {
        return this[anObjNameDest];
      },
      getDynObjectVal: function(anObjNameDest, anObjPropName) {
        return this[anObjNameDest][anObjPropName];
      },
      setDynObjectVal: function(anObjNameDest, anObjPropName, value) {
        this[anObjNameDest][anObjPropName] = value;
      },
      setDynObject: function(anObjNameDest, ObjSrc) {
        this[anObjNameDest] = ObjSrc;
      }
    }
  });


oneApp.directive("progressBarDynTyped", function() {
    return {
      restrict: "E",
      templateUrl: "aTemplateUrl.html",
      controller: function(sharedProps) {

        this.test = sharedProps.getDynObject('progressBarDynTyped00');

        this.dynMultiplier 
                = sharedProps.getDynObjectVal('progressBarDynTyped00', 'dynMultiplier');
      },
      controllerAs: "progressBarDynTyped00"
    };

  });

Problem:

in the code above I have a service where there are two test Objects (previously there were only one of those, the second one was added for test purpose), those test objects should be returned from this service to some contrellers functions, like in the "progressBarDynTyped00" controller, because I need to get and set some values inside those objects.

Calling all of the retuned functions from the service gave me always an Undefined object or a "Cannot read property 'dynMultiplier' of undefined".

Question:

Is there a way to return a dynamic object passing the name of the object to the service function?

Thanks to all.

Answer 1

I think you are confused between two ways of creating service in Angular: using service keyword and factory keyword

For service keyword, the public functions are supposed to be made available by assigning it to this:

angular.module('myApp', ['ui.bootstrap', 'ngTouch', 'ngAnimate']).service('sharedProps', function () {

    this.getDynObject = function (anObjNameDest) {
       //...
    };

}]);

And it doesn't expect to have return value. So with the code above, there's no public functions to be called, and that explains the error