web-dev-qa-db-fra.com

Passer des arguments à un service dans AngularJs

J'essaie de configurer mes premiers petits morceaux des AngularJs pour un matériel trivial, mais malheureusement sans succès après un temps considérable.

Mes locaux:
Les utilisateurs sélectionnent l'une des options dans une liste déroulante et font charger un modèle approprié dans un div situé sous la sélection. J'ai mis en place le service, une directive personnalisée (en suivant les réponses de @Josh David Miller sur ce post , et un contrôleur en place. L'appel ajax en service fonctionne bien, sauf que les paramètres auxquels je passe sont transmis. le serveur est codé en dur. Je veux que ce soit la "clé" du menu déroulant sélectionné par l'utilisateur. Pour l'instant, je ne parviens pas à faire passer ce code au service.

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

et la configuration HTML est

<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>

J'ai besoin que la valeur actuellement codée en dur 'b1' dans l'appel $ http ajax soit la valeur dans $ scope.breed.code. 

angularjsangularjs-service
14
rstarter

Votre demande ajax est asynchrone alors que votre contrôleur se comporte comme si la demande était synchronisée.

Je suppose que la requête get a tout ce dont elle a besoin pour fonctionner correctement.

Passez d’abord un rappel à votre service (notez l’utilisation de 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
                });
        };
    };
});

Dans votre contrôleur: 

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

Ce faisant, votre code traite maintenant votre demande d'obtention asynchrone.

Je ne l'ai pas testé, mais cela doit être fait.

18
roland

Je pense que vous avez défini la factory pas de la bonne manière. Essaye celui-là:

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});
    }
});
0
Maxim Shoustin