1

Tenho um consulta a uma API que teoricamente está retornando os dados, pelo menos no console me mostra os mesmos. Porém na View com o ng-repeat não está trazendo nada.

Abaixo segue o código que estou usando:

Factory:

pcFactories.factory('TeacherSrv', function ($http) {
    return {
        getAllTeachers: function (TTBId) {
            $http.get('http://xxx.xxx.xxx/' + TTBId)
                .success(function (data) {
                    return data;
                })
                .error(function (status) {
                    return status;
              });
        }
    };
})

Controller

   pcControllers.controller('TeacherCtrl', function ($scope, TeacherSrv) {
        $scope.teachers = TeacherSrv.getAllTeachers(TTBId);
    })

View

<tr ng-repeat="t in teachers" on-finish-render="ngRepeatFinished">
   <td>
     <img src="Images/no-photo.png" alt="" />
     <a href="" class="user-link">{{t.TEAName}}</a>
     <span class="user-subhead">{{t.TEAEmail}}</span>
   </td>
</tr>

Espero que possam me ajudar.

2
  • A primeira coisa que me vem a cabeça é: Qual o valor de TTBId?. A segunda é: De onde TTBId recebe esse valor?
    – mutlei
    7/04/2015 às 17:24
  • TTBId é 1. E por enquanto está sendo carregado de uma variável $scope a fim de executar testes por enquanto. 7/04/2015 às 20:24

2 Respostas 2

1

O problema não esta no Angular, e sim no modo como você manipula os resultados retornados pela chamada de API.

A linha return data; esta retornando dados dentro da função executada pela promise, e não pela factory.

Alterando o método getAllTeachers para retornar uma promise, e manipulando a promise dentro do seu controller resolve o problema.

pcFactories.factory('TeacherSrv', function ($http) {
    return {
        getAllTeachers: function (TTBId) {
            return $http.get('http://xxx.xxx.xxx/' + TTBId);
        }
    };
});

pcControllers.controller('TeacherCtrl', function ($scope, TeacherSrv) {
    $scope.teachers = null;
    TeacherSrv.getAllTeachers(TTBId).success(function (data) {
        $scope.teachers = data;
    })
    .error(function (status) {
        $scope.teachers = status;
    });
});

Tudo isto se deve ao comportamento assíncrono do Javascript, e ao fato de você não estar retornando nada no método getAllTeachers.

Observação: você não precisa especificar http:// na URL no método get do serviço $http.

2
  • Valeu funcinou, porém agora estou recebendo um Warning conforme a mensagem abaixo: Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. 7/04/2015 às 20:22
  • A culpa não é deste código que te passei. Algum HTML ou Javascript resultado de um Ajax que você esta executando, executa novas chamadas Ajax enquanto é carregado, o que causa o Warning. Acredito inclusive que este warning pode estar sendo originado em uma chamada jQuery, aonde ele é mais tradicional de ser encontrado. Em todo caso, é um problema diferente do da pergunta original. 8/04/2015 às 1:14
1

Acredito que o que esteja acontecendo é que quando o ng-repeat é executado os dados da API ainda nao foram retornados. Dessa forma teachers ainda esta vazio e o ng-repeat nao vai mostrar nada.

Uma forma de solucionar esse problema é da seguinte forma:

pcControllers.controller('TeacherCtrl', function ($scope, TeacherSrv) {
    TeacherSrv.getAllTeachers(TTBId).then(function(result){
       $scope.teachers = result.data;
    });
})

O que eu mudei acima foi o seguinte:

  • TeacherSrv.getAllTeachers(TTBId) retorna uma $promise, que quando finalizada vai atualizar o valor do $scope.teachers. Dessa forma voce garante que o seu ng-repeat vai executar como esperado assim que os dados da API forem retornados.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .