javascript - escape - ng-cloak

AngularJS: muestra la carga de HTML hasta que se cargan los datos

Question

¿Cómo hago para que AngularJS muestre un control de giro de carga hasta que los datos hayan terminado de cargarse?

Si mi controlador tiene $scope.items = [{name: "One"}] configurado de forma estática, y un cargador AJAX que llena $scope.items[0][''lateLoader''] = "Hello" , me gustaría para mostrar hasta que se complete la carga de AJAX, y luego rellene el intervalo de límite con los datos recuperados.

<ul ng-repeat="item in items">
  <li>
    <p>Always present: {{item.name}}</p>
    <p>Loads later: <span ng-bind="item.lateLoader"><i class="icon icon-refresh icon-spin"></i></span></p>
  </li>
</ul>

Este código completa el intervalo de enlace de inmediato, y como item.lateLoader está vacío, el control de giro se reemplaza por nada.

¿Cómo debo hacer esto limpiamente?

Answer 1

@lucuma,

Buena respuesta, una alternativa puede ser inyectar $ timeout y reemplazar la función de timeout nativa:

var app = angular.module(''plunker'', []);

app.controller(''MainCtrl'', function($scope, $timeout) {

        $scope.name = ''World'';
        $scope.items = [{name: "One"}];
        $timeout(function() {
                $scope.$apply(function() {
                        $scope.items[0].lateLoader = ''i just loaded'';  
                });
        }, 1000);
});

Answer 2

En realidad, he estado usando una solución para esto por un tiempo que funciona bien y es mejor que usar un tiempo de espera en mi opinión. Estoy usando $ resource, pero podrías hacer lo mismo con $ http. En mis $ objetos de recursos, agrego el bit en el siguiente código que establece los conjuntos cargados en verdadero.

$scope.customer = $resource(dataUrl + "/Course/Social/" + courseName)
    .get({}, function (data) { data.loaded = true; });

Entonces, en mi opinión puedo usar:

ng-hide="customer.loaded"

Por supuesto, no usaría $ resource directamente en un controlador, lo extraigo a un servicio de CustomerRepository, pero era más simple mostrarlo de esta manera aquí.

Answer 3

Me gustaría crear una directiva personalizada según la otra respuesta, pero aquí es cómo podría hacerlo sin la directiva, lo que podría ser una buena idea de aprender antes de entrar en una funcionalidad más compleja. Un par de cosas a tener en cuenta:

1. Usando un setTimeout para simular una llamada ajax
2. El icono de carga está precargado y se oculta cuando se cargan los datos. Sólo una simple directiva ng-hide.
3. No hay imagen de carga en mi ejemplo, solo un texto que se oculta (obviamente, su html tendrá las referencias css correctas).

Demostración: http://plnkr.co/edit/4XZJqnIpie0ucMNN6egy?p=preview

Ver:

<ul >
  <li ng-repeat="item in items">
    <p>Always present: {{item.name}}</p>
    <p>Loads later: {{item.lateLoader}} <i ng-hide="item.lateLoader"  class="icon icon-refresh icon-spin">loading image i don''t have</i></p>
  </li>
</ul>

Controlador:

app.controller(''MainCtrl'', function($scope) {
  $scope.name = ''World'';
  $scope.items = [{name: "One"}];
  setTimeout(function() {
    $scope.$apply(function() {
     $scope.items[0].lateLoader = ''i just loaded'';  
    });
  }, 1000);
});

Answer 4

Yo crearía una directiva personalizada y pondría un marcado predeterminado con un spinner.

Aquí hay algunos enlaces sobre directivas personalizadas.

1) ¡Los videos de Egghead son impresionantes! http://www.egghead.io/video/xoIHkM4KpHM

2) Documentos angulares oficiales sobre directivas http://docs.angularjs.org/guide/directive

3) Buena descripción de angular en 60 minutos. http://weblogs.asp.net/dwahlin/archive/2013/04/12/video-tutorial-angularjs-fundamentals-in-60-ish-minutes.aspx