Передача аргументов (-ов) службе в AngularJs

Я пытаюсь настроить свои первые лакомые кусочки AngularJs для тривиального материала, но, к сожалению, неудачно на нем после значительного количества времени.

Мое помещение:
Пользователи выбирают один из вариантов из раскрывающегося списка и имеют соответствующий шаблон, загружаемый в div ниже выбора. Я настроил сервис, настраиваемую директиву (следуя ans by @Josh David Miller в этом сообщении , и контроллер на месте. Ajax-вызов в службе отлично работает, за исключением того, что параметры, которые я передаю серверу, жестко закодированы. Я хочу, чтобы это был "ключ" из раскрывающегося списка, выбранного пользователем. В настоящий момент я не получаю этот код, переданный службе.

Моя конфигурация:

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

и настройка HTML

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

Мне нужно в настоящее время hardcoded значение 'b1' в $http ajax-вызове быть значением в $scope.breed.code.

Ответы

Ответ 1

Ваш запрос ajax будет асинхронным, пока ваш контроллер ведет себя так, как если бы запрос был синхронизирован.

Я предполагаю, что запрос на получение имеет все необходимое для правильного выполнения.

Сначала передайте обратный вызов вашей службе (обратите внимание на использование 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
                });
        };
    };
});

В вашем контроллере:

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

Теперь ваш код обрабатывает ваш запрос на получение async.

Я не тестировал его, но он должен выполнять эту работу.

Ответ 2

Я думаю, что вы определили factory не в правильном направлении. Попробуйте следующее:

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