Passage d'argument (s) à un service dans AngularJs

Je suis en train de configurer mon premier bribes de la AngularJs pour des choses triviales, mais malheureusement sans succès à elle après un temps considérable.

Mon Postulat:
Aux utilisateurs de sélectionner l'une des options à partir d'une liste déroulante et ont un modèle approprié, chargé dans un div en dessous de la sélectionner. J'ai mis en place le service, une coutume de la directive (en suivant le sna par @Josh David Miller sur ce post, et un contrôleur en place. L'appel ajax dans le service fonctionne bien sauf que les paramètres que je passe pour le serveur est codé en dur. Je veux que ce soit la " clé " dans la liste déroulante sélectionnée par l'utilisateur. Pour le moment, je suis à défaut d'avoir ce code transmis 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 actuellement la valeur codée en dur " b1 " dans le $http appel ajax à la valeur en dollars de la portée.la race.code.

source d'informationauteur rstarter

  1. 18

    Votre requête ajax est asynchrone, tandis que votre contrôleur se comporte comme s'il s'agissait d'une requête de synchronisation.

    Je suppose que la requête get a tout ce qu'il faut pour jouer à droite.

    D'abord passer un rappel à votre service (notez l'utilisation de la 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;
    });
}

    Faire de sorte que votre code est de la manipulation de maintenant, votre async requête get.

    Je n'ai pas tester, mais il doit être en train de faire le travail.

  2. 0

    Je pense que vous avez défini le factory pas dans le droit chemin. Essayez celui-ci:

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