我有一个包含2个控制器的应用程序,其中一个获得代理列表,而另一个获得该代理的描述,单击img图标时,第一个代理显示它没有问题,但是当您想要获得第二秒却什么也没显示。
任何观点都值得赞赏
我遵循了promise模式,但是我不知道这是否影响第二个对象的返回
(function() {
'use strict';
var app= angular.module('app',['angularUtils.directives.dirPagination','agentsSrv']);
app.controller("agentsCtrl",['$scope','agentsService','agentDetailService' ,function ($scope,agentsService,agentDetailService) {
//Obtains the id of Agente and inyect to url
$scope.info = function getId (agent){
var url = "http://localhost:9080/DAPortfolioServices-war/portfolio/v1/assign/"+agent;
agentDetailService.getId(url);
alert(url);
}
var promise = agentsService.getAgents();
promise.then(function(data)
{
$scope.pageNumber = 1;//Pagina Actual
$scope.items = [10,20,30]; // Valores de Paginacion
$scope.selectPage=10; // Valor por defecto de paginacion
$scope.agentsList = data.data;
console.log(JSON.stringify($scope.agentsList));
})
}]);
//*****Detail of Selected Agent ********
app.controller("agentsDetailCtrl",['$scope','agentDetailService' , function ($scope,agentDetailService) {
var promise = agentDetailService.getAgentDetail();
promise.then(function(data)
{
$scope.agentsDetailList = data.data;
console.log(JSON.stringify($scope.agentsDetailList));
})
}]);
})();//Acaba Controler
/****************** SERVICE **************/(
var srv = angular.module('agentsSrv', []);
srv.service("agentsService", function($http, $q) {
var deferred = $q.defer(); // Nuestro productor es deferred
$http.get('../resources/agent.json').then(function(data) {
deferred.resolve(data);
})
this.getAgents = function() {
return deferred.promise;
}
})
**// Method that get the data of selected agent**
srv.service("agentDetailService", function($http ,$q){
var deferred = $q.defer();
this.getId = function(url){// Obtenemos la Url que nos pasara los datos
$http.get(url).then(function(data){
deferred.resolve(data);
})
}
this.getAgentDetail= function(){
return deferred.promise;
}
})//agentDetailService
<div class="megamenu-container">
</div>
<div class="row">
<div class="col-10 text-center">
<h3 class="pt-2">Consulta de asignaciones</h3>
</div>
</div>
<br/>
<div class="card">
<div class="card-header">
<h4>Agentes</h4>
</div>
<div class="card-body " ng-Controller="agentsCtrl" >
<table class="ml-table-alt-rows">
<thead>
<th class="ml-table-col">No. Agente</th>
<th class="ml-table-col">Agente</th>
<th class="ml-table-col">Zona de promotoría</th>
<th class="ml-table-col">Tipo de agente</th>
<th class="ml-table-col">Seleccionar todo en página actual</th>
</thead>
<tbody >
<tr>
<td>
<input type="text" ng-model="searchAgentById" class="form-control" >
</td>
<td>
<input type="text" ng-model="searchAgentByName" class="form-control" >
</td>
<td>
<input type="text" ng-model="searchAgentByZone" class="form-control" >
</td>
<td>
<input type="text" ng-model="searchAgentByType" class="form-control" >
</td>
</tr>
<tr dir-paginate="agent in agentsList | orderBy:'name'|filter:{id:searchAgentById,name:searchAgentByName,zone:searchAgentByZone,type:searchAgentByType}|itemsPerPage:selectPage" ng-class-odd="'odd'" ng-class-even="'even'" >
<td ><label>{{agent.id}}</label></td>
<td ><label>{{agent.name}}</label></td>
<td ><label>{{agent.zone}}</label></td>
<td ><label>{{agent.type}}</label></td>
<td >
<img src="../resources/img/inputs/detail.png" ng-Click="info(agent.id)" >
</fieldset>
</td>
</tr>
</tbody>
</table>
<div class="card" ng-controller="agentsDetailCtrl">
<div class="card-header">
<h4>Asignaciones del Agente:</h4>
<label>Alejandra Moran Castillo, GEID: {{agentsDetailList.queryFilter[0].objPolicyData.idAssign}}</label>
</div>
<div class="card-body">
<div class="row">
<div class="col-3 text-left"><label>20-12-2018</label></div>
</div>
<div class="row">
<div class="col-3 text-left"><label>Estatus:</label></div>
<div class="col-3 text-left"><label>Conducto de cobro:</label></div>
<div class="col-3 text-left"><label>Retenedor(es)-Unidad de pago</label></div> <!-- "listRetainerPaymentUnit": "idRetainer":"100","nameRetainer":"RETAINER","idPaymentUnit":"109","namePaymentUnit":"PAYMEMT UNIT" -->
<!--****************************************************** "listFederalEntity" ************************************************ -->
<div class="col-3 text-left"><label>Entidad federativa:</label></div> <!--"idFederalEntity":"MEX" "nameFederalEntity":"CDMX" -->
</div>
<div class="row">
<div class="col-3 text-left"><label>{{agentsDetailList.queryFilter[0].objPolicyData.listStatusPolicy[0].policyStatusCode}}</label></div>
<div class="col-3 text-left"><label>DxN {{agentsDetailList.queryFilter[0].objPolicyData.collectionType.DxN}}</label></div>
<div class="col-3 text-left"><label>{{agentsDetailList.queryFilter[0].objPolicyData.listRetainerPaymentUnit[0].idRetainer}}</label></div>
<div class="col-3 text-left"><label>{{agentsDetailList.queryFilter[0].objPolicyData.listFederalEntity[0].nameFederalEntity}}</label></div>
</div>
<div class="row">
<div class="col-5 text-right">
<label>NO. DE POLIZAS EN LA SELECCIÓN:</label>
</div>
<div class="col-5">
<label><strong>{{agentsDetailList.queryFilter[0].policyDataInfo.policyNumber}}</strong></label>
</div>
</div>
<div class="row"> <!-- "policyDataInfo" Objeto que incluye los datos de polizas -->
<div class="col-5 text-right">
<label>TAMAÑO DE POLIZAS EN LA SELECCIÓN:</label><!-- "policyNumber" (cantidad) -->
</div>
<div class="col-5">
<label><strong>{{agentsDetailList.queryFilter[0].policyDataInfo.sizeOfFullPolicyDataObject}} {{agentsDetailList.queryFilter[0].policyDataInfo.unitSizeFullPolicyDataObject}}</strong></label><!-- sizeOfFullPolicyDataObject(cantidad) +"unitSizeFullPolicyDataObject"(mb)-->
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分:1)
因此,您有一些奇怪的递延反模式,其中您没有使用$http服务返回的内置承诺,但是您还尝试了重复使用对多个http请求的相同承诺(这是不可能的-您只能解决或拒绝一次承诺)。
您可以享受以下服务:
srv.service("agentDetailService", function($http ,$q){
var deferred = $q.defer();
this.getId = function(url){
$http.get(url).then(function(data){
deferred.resolve(data);
})
}
this.getAgentDetail= function(){
return deferred.promise;
}
})
尽管您总是在agentDetailService.getAgentDetail()
中返回相同的承诺,但您还有第二个函数agentDetailService.getId()
,它将多次解析该承诺(如果多次调用)。
您可以使用$http
服务返回的承诺来解决此问题:
srv.service("agentDetailService", function( $http ){
this.getAgentDetail = function(agent) {
// Return the promise of the $http call directly, we don't need '$q' service at all
return $http.get("http://localhost:9080/DAPortfolioServices-war/portfolio/v1/assign/" + agent).then(function( response ){
// By returning 'response.data' we only expose the actual data
// that was returned from the server
return response.data;
});
};
});
然后在您的agentsCtrl
控制器中,您只需解析一次承诺-每个请求一个承诺:
app.controller("agentsCtrl",['$scope','agentsService','agentDetailService' ,function ($scope,agentsService,agentDetailService) {
//Obtains the id of Agente and inyect to url
$scope.info = function getId (agent){
agentDetailService.getAgentDetail(agent).then(function(data) {
$scope.pageNumber = 1;
$scope.items = [10,20,30];
$scope.selectPage=10;
// Note that I don't use 'data.data' here because the service is now responsible for that
$scope.agentsList = data;
});
}
}]);
相同的延迟反模式也适用于第二项服务,因此您还应该使用我在agentDetailService
中演示的相同方法来更改它