将参数传递给 AngularJs 中的服务 [英] Passing argument(s) to a service in AngularJs

问题描述

我正在尝试为一些琐碎的东西配置我的 AngularJs 的第一个花絮，但不幸的是在经过相当长的时间之后没有成功.

我的前提:
用户从下拉列表中选择一个选项，并将适当的模板加载到选择下方的 div 中.我已经设置了服务，一个自定义指令(按照@Josh David Miller 在这个 post 和一个控制器.服务中的 ajax 调用工作正常，只是我传递给服务器的参数是硬编码的.我希望这是关键"从用户选择的下拉列表中.目前我无法将此代码传递给服务.

我的配置:

 var firstModule = angular.module('myNgApp', []);//向服务器请求模板的服务firstModule.factory('katTplLoadingService', 函数 ($http) {返回函数(){$http.get("${createLink(controller:'kats', action:'loadBreedInfo')}", {params:{'b1'}}). 成功(功能(模板，状态，标题，配置){返回模板})};});firstModule.controller('KatController', function($scope, katTplLoadingService) {$scope.breed = {代码:''}//这里我没有成功地尝试将用户选择的代码设置为服务中的变量，//var objService = new katTplLoadingService();//objService.breedCode({code: $scope.breed.code});$scope.loadBreedData = function(){$scope.template = katTplLoadingService();}});firstModule.directive('showBreed', function ($compile) {返回 {范围:真实，链接:函数(范围、元素、属性){变种；attrs.$observe('模板'，函数(tpl){如果(angular.isDefined(tpl)){el = $compile(tpl)(scope);element.html("");element.append(el);}});}};})

HTML 设置是

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

</表单>

我需要 $http ajax 调用中的当前硬编码值b1"作为 $scope.breed.code 中的值.

解决方案

您的 ajax 请求是异步的，而您的控制器表现得好像请求是同步的.

我假设 get 请求具有正确执行所需的一切.

首先向您的服务传递一个回调(注意 fn 的用法):

firstModule.factory( 'katTplLoadingService', function ($http) {返回 {fn: function(code, callback) {//注意回调参数$http.get("${createLink(controller:'kats', action:'loadBreedInfo')}",params:{code: code}})//把你的代码参数放在这里.success(功能(模板，状态，标题，配置){回调(模板)；//将结果传递给回调});};};});

在您的控制器中:

$scope.loadBreedData = function() {katTplLoadingService.fn($scope.breed.code, function(tmpl) {//注意 tmpl 参数$scope.template = tmpl;});}

这样做您的代码现在正在处理您的异步获取请求.

我没有测试它，但它一定能完成工作.

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.

解决方案

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.

这篇关于将参数传递给 AngularJs 中的服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！