Passing argument(s) to a service in AngularJs

Question

I am trying to configure my first tidbits of the AngularJs for a trivial stuff, but unfortunately unsuccessful at it after considerable amount of time.

My Premise:
Users select one of the options from a dropdown and have an appropriate template loaded into a div below the select. I have set up the service, a custom directive (by following the ans by @Josh David Miller on this post, and a controller in place. The ajax call in service is working fine except that the params that I pass to the server is hardcoded. I want this to be the 'key' from the dropdown selected by user. At the moment I am failing to have this code passed to the service.

My configuration:

    var firstModule = angular.module('myNgApp', []);

    // service that will request a server for a template
    firstModule.factory( 'katTplLoadingService', function ($http) {

        return function() {


            $http.get("${createLink(controller:'kats', action:'loadBreedInfo')}", {params:{'b1'}}
            ).success(function(template, status, headers, config){
                return template

            })
        };
    });


    firstModule.controller('KatController', function($scope, katTplLoadingService) {
        $scope.breed = {code:''}

        // here I am unsuccessfully trying to set the user selected code to a var in service, 

        //var objService = new katTplLoadingService();
        //objService.breedCode({code: $scope.breed.code});


        $scope.loadBreedData = function(){
            $scope.template = katTplLoadingService();
        }
    });



    firstModule.directive('showBreed', function ($compile) {
        return {
            scope: true,
            link: function (scope, element, attrs) {
                var el;
                attrs.$observe( 'template', function (tpl) {

                    if (angular.isDefined(tpl)) {

                        el = $compile(tpl)(scope);
                        element.html("");
                        element.append(el);
                    }
                });
            }
        };
    })

and the HTML setup is

<form ng-controller="KatController">

   <select name="catBreeds" from="${breedList}" ng-change="loadBreedData()"
         ng-model="breed.code" />

   <div>

      <div show-breed template="{{template}}"></div>

   </div>

</form>

I need the currently hardcoded value 'b1' in the $http ajax call to be the value in $scope.breed.code.

roland · Accepted Answer · 2015-05-02 08:59:40Z

18

Your ajax request is async while your controller behaves as if the request were sync.

I assume that the get request has everything it needs to perform right.

First pass a callback to your service (note the usage of fn):

firstModule.factory( 'katTplLoadingService', function ($http) {
    return { 
        fn: function(code, callback) { //note the callback argument
            $http.get("${createLink(controller:'kats', action:'loadBreedInfo')}",
            params:{code: code}}) //place your code argument here
                .success(function (template, status, headers, config) {
                    callback(template); //pass the result to your callback
                });
        };
    };
});

In your controller:

$scope.loadBreedData = function() {
    katTplLoadingService.fn($scope.breed.code, function(tmpl) { //note the tmpl argument
        $scope.template = tmpl;
    });
}

Doing so your code is handling now your async get request.

I didn't test it, but it must be doing the job.

edited May 2, 2015 at 8:59

answered Nov 10, 2013 at 14:22

roland

7,7956 gold badges48 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

rstarter Over a year ago

Thanks!! that solved the first puzzle...I made a typo in the question...I just edited it to {params:{code:'b1'}}. Is there some way to pass this hardcoded value 'b1' to be passed from the controller? This value should be the value set in $scope.breed.code

rstarter Over a year ago

And that works for sure!!!Thank you very much...been spending a lot of time for this to work...obviously i'm noob!!

Imri Barr Over a year ago

Not sure why to introduce the fn function. The function he first wrote was perfectly fine if he referred to it as a promise. Which means: $scope.template = katTplLoadingService(); should have been changed to: katTplLoadingService().then(function(result){ $scope.template = result; });

Allan Pereira · Accepted Answer · 2016-06-20 18:18:18Z

0

I think you defined the factory not in right way. Try this one:

firstModule.factory('katTplLoadingService', ['$resource', '$q', function ($resource, $q) {
    var factory = {
        query: function (selectedSubject) {
            $http.get("${createLink(controller:'kats', action:'loadBreedInfo')}", {
                params: {
                    'b1'
                }
            }).success(function (template, status, headers, config) {
                return template;
            })
        }
    }
    return factory;
}]);


firstModule.controller('KatController', function($scope, katTplLoadingService) {

    $scope.breed = {code:''}    

    $scope.loadBreedData = function(){
        $scope.template = katTplLoadingService.query({code: $scope.breed.code});
    }
});

edited Jun 20, 2016 at 18:18

Allan Pereira

2,5704 gold badges23 silver badges28 bronze badges

answered Nov 10, 2013 at 14:20

Maxim Shoustin

78k29 gold badges212 silver badges229 bronze badges

1 Comment

rstarter Over a year ago

I just fixed with the help from @roland. But thanks anyways for your time!!

Collectives™ on Stack Overflow

Passing argument(s) to a service in AngularJs

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related