how can I use a function which is located inside a service?

Question

What I am trying to do is to use function globally throughout controllers. The problem is when I want to use the function I defined inside the service in the first function. It shows an error that it cannot find a function. I tried without this keyword but it's not working. I can go to all function when I tried in other controllers, which is a good sign that I can use this service globally.

In short, I want to use all function inside first function.

app.factory("UserService", function() {
  var users = ["Peter", "Daniel", "Nina"];

  return {
    all: function() {
      return users;
    },
    first: function() {
      var users = this.all(); 
      return users[0];
    }
  };
});

The code above was an example that I made and real code appears like this. controller

angular.module("app").requires.push("app.region");

I put the region to app so I can use the service. After that I made a controller like this

.controller("regionCreateController", ["$scope", "phoneMaskService", function ($scope, phoneMaskService) {
    $scope.createClicked = function (data) {
        data = phoneMaskService.putMaskOnRegion(data);
        console.log(data);

    };
}

When I put phoneMaskService which is the service I made in the app.js and it fails.

This is the error I am getting

angular.js:14110 ReferenceError: removeAllLetters is not defined

This is the actual code making errors.


        .factory("phoneMaskService", [function () {


            var returnMethod = {
                removeAllLetters: removeAllLetters,
                putMaskOn: putMaskOn,
                putMaskOnRegion: putMaskOnRegion
            }; 

            return returnMethod;
            function removeAllLetters(value) {
                var val = value.replace(/\D+/g, '').replace('\-', '');
                return val;
            }
            function putMaskOn(value) {
                console.log(value);
                value = this.removeAllLetters(value);
                console.log(value);
                var isMobile = parseInt(value.charAt(1)) == 2;
                if (isMobile) {
                    var x = value.replace(/\D/g, '').substring(0, 14).match(/(\d{3})(\d{3})(\d{3,})/);
                    x = ' ( ' + x[1] + ' ) ' + x[2] + ' - ' + x[3];
                    return x;
                } else {
                    var x = value.replace(/\D/g, '').substring(0, 14).match(/(\d{2})(\d{3})(\d{3,})/);
                    x = ' ( ' + x[1] + ' ) ' + x[2] + ' - ' + x[3];
                    return x;
                }
            }
            function putMaskOnRegion(object) {
                angular.forEach(object, function (value, key) {
                    if (key == "contactNumberPhone") {
                        var testvalue = this.removeAllLetters(value);
                        console.log(this);
                        console.log("test value" + testvalue);
                        object[key] = this.removeAllLetters(value);
                    }  
                });
                return object;
            }

        }])

The error happens the line here and says removeallletters are undefined

 var testvalue = this.removeAllLetters(value);

controller is working fine because i can register service and use **first** function and when I debug it, it goes inside first function but after encounter **all** function, it says **undefined**. — dumb11, Mar 10 '20 at 00:35
I ask for your controller code, because the code you supplied works fine: https://codepen.io/shaunetobias/pen/zYGppwZ — Shaun E. Tobias, Mar 10 '20 at 00:41
The code you have should work fine if you are using it normally. There can be binding problems if you pass those functions to other objects. We would need to see the controller code to know what is going wrong. — georgeawg, Mar 10 '20 at 00:50
https://glebbahmutov.com/blog/why-function-bind-matters-little-in-angular/ This documentations I think explains what I have done wrong I guess. — dumb11, Mar 10 '20 at 01:20
Review [How does the “this” keyword work?](https://stackoverflow.com/questions/3127429/how-does-the-this-keyword-work). Without a [Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) it is hard to understand what you are doing wrong. — georgeawg, Mar 10 '20 at 02:35

score 1 · Answer 1 · answered Mar 10 '20 at 00:43

1

One approach to avoid binding problems is to declare the functions inside the factory:

app.factory("UserService", function() {
  var users = ["Peter", "Daniel", "Nina"];

  return { all: all, first: first };

  function all() {
      return users;
  }

  function first() {
      var users = all(); 
      return users[0];
  }

});

answered Mar 10 '20 at 00:43

georgeawg

48,608
13
72
95

This worked and when I restart application it doesn't work . lol – dumb11 Mar 10 '20 at 01:02
1

Without a [Reproducible Example](https://stackoverflow.com/help/minimal-reproducible-example) it is hard to understand what you are doing wrong. – georgeawg Mar 10 '20 at 02:37

gavgrif · Answer 2 · 2020-03-10T02:04:31.263

I use the follwoing when declaring factories, which creates an object within the factory declaration, binds methods to it and returns is as the the factory object.This might work in your case.

app.factory("UserService", function() {
  var services = {};

  services.users = ["Peter", "Daniel", "Nina"];

  services.all = function() {
      return services.users;
  }

  services.first = function() {
      return services.all()[0]; 
  }
 return services;
});

how can I use a function which is located inside a service?

2 Answers2