javascript - 获取所选代理的详细代理 JSON

Question

我有一个由 2 个 Controller 组成的应用程序，其中一个我得到一个代理列表，另一个我得到该代理的描述，当单击 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>
  

Answer 1

所以你有一些奇怪的延迟反模式，你不使用 $http 返回的内置 promise 服务，但您还尝试为多个 http 请求重用相同的 promise (这是不可能的 - 您只能解决或拒绝一次 promise )。

您有以下服务:

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() 中返回相同的 promise ，但您还有第二个函数 agentDetailService.getId() 可以多次解析该 promise (如果调用不止一次)。

您可以使用从 $http 服务返回的 promise 来解决这个问题:

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 Controller 中，您只需解决一次 promise - 每个请求一个 promise :

  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

中演示的相同方法更改它