将参数传递给AngularJs中的服务 [英] Passing argument(s) to a service in AngularJs
问题描述
我正在尝试将AngularJs的第一个花絮配置为一些琐碎的东西,但不幸的是,经过相当长的时间后,它并没有成功.
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.
我的前提:
用户从下拉菜单中选择一个选项,并将适当的模板加载到所选内容下方的div中.我已经设置了服务,一个自定义指令(通过在此
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.
我的配置:
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>
我需要$ http ajax调用中的当前硬编码值'b1'为$ scope.breed.code中的值.
I need the currently hardcoded value 'b1' in the $http ajax call to be the value in $scope.breed.code.
推荐答案
您的ajax请求是异步的,而您的控制器的行为就好像请求是同步的.
Your ajax request is async while your controller behaves as if the request were sync.
我认为get请求具有正确执行所需的一切.
I assume that the get request has everything it needs to perform right.
首先将回调传递给您的服务(请注意fn的用法):
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
});
};
};
});
在您的控制器中:
$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屋!