Entrei num loop infinito quando tentei chamar uma função de dentro de um ngRepeat.

Front-end

20/12/2016

Alguém pode me ajudar?
Entrei num loop infinito quando tentei chamar uma função de dentro de um ngRepeat.

Ex:
ng-repeat="medico in medicos" | oderby:...
...
<td ng-bind="GetNameMedico(medico.MedicoId)"></td>
...
Entro num loop Infinito... Aff...
Obs.: Meu serviço com WebAPI está funcionando, se eu tento com ng-click="GetNameMedico(medico.MedicoId)" também funciona, mas numa lista <li> ou numa tabela <tr><td>... Não. Entro no loop infernal!

Talvez seja problema do $scope. sei lá... ?!

Grato,
Carlos Alberto

Essa dúvida foi gerada a partir de um comentário no artigo [url:descricao=Introdução ao AngularJS - Curso Completo de AngularJS - Aula 1]https://www.devmedia.com.br/introducao-ao-angularjs-curso-completo-de-angularjs-aula-1/32148[/url]
Carlos Santos

Carlos Santos

Curtidas 0

Respostas

Péricles Samba

Péricles Samba

20/12/2016

Olá Carlos, beleza?

Você pode mostrar um pouco mais do seu código?
GOSTEI 0
Carlos Santos

Carlos Santos

20/12/2016

Posso sim, mas antes deixa eu explicar melhor, pois de repente surge uma luz.

1. Tenho um objeto Medico, com: MedicoId, Nome, Crm, IdEsecialidade, etc.;

2. Tenho um segundo objeto que é ChamadaMedico, que guarda as chamadas aos médicos para atendimento de emergência em Leitos específicos e isso fica num Mural do sistema;

3. No objeto ChamadaMedico eu gravava o Nome do Médico, mas refatorei esse processo e agora gravo seu Id;

4. Montei um CRUD com Busca, Paginação, Ordenação, Validação e ainda exponho esses dados numa API em Asp.Net Web API... tudo funcionando perfeito;

5. Mas agora, na minha tabela ou na minha lista quero mostrar o nome do Medico, buscando-o através de seu Id;

6. Já criei o Controller WebApi no Back-End (com Asp.Net Web API), já criei o Servico e o Controller (no Front-End com AngularJS);

7. Fiz uns testes tanto no Back quanto no Front e na API e tudo ok, mas no AngularJS testei com o ng-Click. Como é só uma chamada ele me retorna o nome do Medico sem problemas, mas ao tentar executar a mesma função no loop do ng-repeat aí não tem jeito; entra no Loop infinito e nem mostra os dados. Pus um debugger e debuguei, através do Chrome e vi que ele fica repetindo a mesma sequência de Id AdEterno...

Desculpe pelo texto grandão, mas tentei ser o mais explícito possível!
Vou postar o código daqui a pouco!

Grato pela atenção!
GOSTEI 0
Carlos Santos

Carlos Santos

20/12/2016

Caro Victor,
- Segue a função no meu controller AngularJS.
Não postei o código do Service, pois ele retorna sem problemas o Nome do Medico.


    $scope.nomeMedico = "";
    $scope.GetDescMedico = function (id) {
        debugger;
        var medicoData = getDiscriptionsService.GetDiscriptionMedico(id);
        medicoData.then(function (medico) {
            $scope.nomeMedico = medico.data;
            delete $scope.nomeMedico;
        }, function () {
            toastr["error"]("Erro ao obter Nome do Médico!", "Nome do Sistema");
        });
    };


Agora na View eu tento mostrar o Nome e não o Id. Segue o código:


                    <tbody>
                        <tr dir-paginate="chamadamedico in chamadaMedicos | filter:criterioDeBusca | orderBy:criterioDeOrdenacao:direcaoDaOrdenacao | itemsPerPage:5" pagination-id="chamadamedico">
                            <td ng-bind="chamadamedico.ChamadaMedicoId"></td>
                            <td ng-bind="chamadamedico.Leito"></td>
                            <td ng-bind="GetDescMedico(chamadamedico.Medico)"></td>  <!--/ AQUI ESTÁ O PROBLEMA -->
                            <td ng-bind="chamadamedico.Mensagem"></td>
                            <td>{{chamadamedico.DataChamada | date:'dd/MM/yyyy'}}</td>
                            <td>
                                <button class="btn btn-primary" ng-disabled="inibeBtnAtualizar()" ng-click="obterPorId(chamadamedico)" data-id="edit" data-toggle="tooltip" data-placement="bottom" title="Editar Chamadamedico" data-original-title="Editar Chamadamedico"><i class="glyphicon glyphicon-edit"></i></button>
                                <button class="btn btn-danger" ng-disabled="inibeBtnExcluir()" ng-click="ExcluirChamadamedico(chamadamedico)" data-id="delete" data-toggle="tooltip" data-placement="bottom" title="Excluir Chamadamedico" data-original-title="Excluir Chamadamedico"><i class="glyphicon glyphicon-trash"></i></button>
                                
                            </td>
                        </tr>
                    </tbody>
                    <dir-pagination-controls max-size="5" 
                              pagination-id="chamadamedico" 
                              direction-links="true" 
                              boundary-links="true">
                   </dir-pagination-controls>
                                
                            </td>
                        </tr>
                    </tbody>
                    <dir-pagination-controls max-size="5" pagination-id="chamadamedico" direction-links="true" boundary-links="true"></dir-pagination-controls>
                </table>

            </div>
GOSTEI 0
Carlos Santos

Carlos Santos

20/12/2016

A linha: 
 delete $scope.nomeMedico;
eu inventei depois, no desespero...
GOSTEI 0
Carlos Santos

Carlos Santos

20/12/2016

Observem a tela sem a função, chamando apenas o campo Medico (int):

http://prntscr.com/dltgaj


E este é o código SEM a função:

<tbody>
                        <tr dir-paginate="chamadamedico in chamadaMedicos | filter:criterioDeBusca | orderBy:criterioDeOrdenacao:direcaoDaOrdenacao | itemsPerPage:5" pagination-id="chamadamedico">
                            <td ng-bind="chamadamedico.ChamadaMedicoId"></td>
                            <td ng-bind="chamadamedico.Leito"></td>
                            @*<td ng-bind="GetDescMedico(chamadamedico.Medico)"></td>    COMENTADO!!!  *@  
                            <td ng-bind="chamadamedico.Medico"></td>   <!--/  CHAMADA ORIGINAL, RETORNANDO O ID  -->
                            <td ng-bind="chamadamedico.Mensagem"></td>
                            <td>{{chamadamedico.DataChamada | date:'dd/MM/yyyy'}}</td>
                            <td>
                                <button class="btn btn-primary" ng-disabled="inibeBtnAtualizar()" ng-click="obterPorId(chamadamedico)" data-id="edit" data-toggle="tooltip" data-placement="bottom" title="Editar Chamadamedico" data-original-title="Editar Chamadamedico"><i class="glyphicon glyphicon-edit"></i></button>
                                <button class="btn btn-danger" ng-disabled="inibeBtnExcluir()" ng-click="ExcluirChamadamedico(chamadamedico)" data-id="delete" data-toggle="tooltip" data-placement="bottom" title="Excluir Chamadamedico" data-original-title="Excluir Chamadamedico"><i class="glyphicon glyphicon-trash"></i></button>
                                
                            </td>
                        </tr>
                    </tbody>


Grato!
GOSTEI 0
Carlos Santos

Carlos Santos

20/12/2016

Agora a mesma função sendo chamada da diretive ngClick():

<div>
       <span class="btn btn-primary" ng-disabled="chamadamedicoForm.$invalid" ng-click="AdicionarEditarChamadamedico()">Salvar</span>
       <span class="btn btn-danger" ng-click="cancelaEdicao()">Calcelar</span>                                                
      
       <!--/  AQUI  -->
       <button class="btn btn-danger" ng-click="GetDescMedico(chamadamedico.Medico)" data-id="delete" data-toggle="tooltip" data-placement="bottom" title="Nome do Médico" data-original-title="Nome do Médico"><i class="glyphicon glyphicon-envelope"></i></button>

      <h3>{}</h3>                        
</div>


Olha a tela:

http://prntscr.com/dltmjq


Grato.
GOSTEI 0
Péricles Samba

Péricles Samba

20/12/2016

Olá Carlos, me desculpe a demora.

Você precisa dar o retorno pela função.

$scope.GetDescMedico = function (id) {
    debugger;
    var medicoData = getDiscriptionsService.GetDiscriptionMedico(id);
    medicoData.then(function (medico) {
        $scope.nomeMedico = medico.data;
        return medico.data; //retornar o valor pela função
    }, function () {
        toastr["error"]("Erro ao obter Nome do Médico!", "Nome do Sistema");
    });
};


Quando você colocou a função no onClick, ela funcionou porque você estava consultando o valor da variável utilizando o {}, mas sua função não está realmente retornando um valor para ser consultada direto.

Qualquer coisa, estamos ai :D
GOSTEI 0
Luan Oliveira

Luan Oliveira

20/12/2016

Boa tarde carlos,

Você conseguiu resolver essa caso? Estou na mesma situação...
GOSTEI 0
Carlos Santos

Carlos Santos

20/12/2016

Opa. Resolvi sim!
Meu objeto ChamadaMedico tinha uma ForeignKey para Medico => IdMedico.

Bastou eu usar um .Include("Medico") na minha controller do Backend.

Algo assim:
var ChamadaMedico = (from cm in _db.ChamadaMedico.Include("Medico") select cm).Where(x=>x.ChamadaMedicoId == id).ToList();

A partir daí, meu objeto ChamadaMedico passa a conter o objeto Medico com todas as suas propriedades. Na listagem basta eu chamar:

=> ChamadaMedico.Medico.Nome, que que mostra o nome do Médico ao invés do Id.

Obrigado aí pela ajuda!

Abração!!!
GOSTEI 0
POSTAR