CODEWITHSUNDEEP
angularjs
Suamere
Suamere

Reputation: 6248

Pass $scope.variable into a service

I call some methods in an angular service like so:

someService.getXXXX($scope);
someService.getYYYY($scope);
//. . . . x 30

The service looks like the following, with a lot of duplicate methods:

this.getXXXX = function ($scope) {
    return $http({
        method: "GET",
        url: "http://localhost:51461/api/XXXX",
        headers: { 'Content-Type': 'application/json' }
    }).success(function (data) {
        $scope.XXXX = data;
        console.log(data);
    }).error(function (data) {
        console.log(data);
    });
};

this.getYYYY = function ($scope) {
    return $http({
        method: "GET",
        url: "http://localhost:51461/api/YYYY",
        headers: { 'Content-Type': 'application/json' }
    }).success(function (data) {
        $scope.YYYY = data;
        console.log(data);
    }).error(function (data) {
        console.log(data);
    });
};

I have like 30 of these that are identical other than the XXXX.

So can't I reduce this to a single function something like this?

someService.getWebService("XXXX", $scope.XXXX);
someService.getWebService("YYYY", $scope.YYYY);

// . . .

this.getWebService = function (url, outVariable) {
    return $http({
        method: "GET",
        url: "http://localhost:51461/api/" + url,
        headers: { 'Content-Type': 'application/json' }
    }).success(function (data) {
        outVariable = data;
        console.log(data);
    }).error(function (data) {
        console.log(data);
    });
};

It appears to be working, because I'm hitting my web service breakpoint, and my angular browser tools show the object being populated. But the model doesn't seem to be updated/applied.

I also tried additionally passing in the $scope every time, just to use $scope.$apply(); after outVariable = data;, I get an error saying digest is already running.

Upvotes: 0

Views: 577

Answers (2)

Chandermani
Chandermani

Reputation: 42669

The reason

someService.getWebService("XXXX", $scope.XXXX);

is not working (assuming xxxx is a object reference) is because you are passing a reference to a function. You can change content of reference not the reference itself.

Also passing $scope object around is a bad practice.

When dealing with promise the better mechanism is use promise api, and return a promise from your service calls, and do assignment in controller.

this.getYYYY = function () {
    return $http({
        method: "GET",
        url: "http://localhost:51461/api/YYYY",
        headers: { 'Content-Type': 'application/json' }
    });
};

and in controller do

$scope.YYYY= service.getYYYY().then(function(data) { $scope.YYYY=data;});

Upvotes: 3

Enzey
Enzey

Reputation: 5254

An alternative to getWebService would be to register and generate the functions.

var genEndpoint = function (endpoint) {
    return function () {
        return $http({
            method: "GET",
            url: "http://localhost:51461/api/" + endpoint,
            headers: { 'Content-Type': 'application/json' }
        });
    };
};

this['get'+ XXX] = genEndpoint(XXX)

Upvotes: 0

Related Questions