Sé que esto se me ha pedido mil veces, pero creo que probé todas las soluciones que he leído y parece que no puedo hacer que funcione.

Tengo una API de la que obtengo mis imágenes. Después de colocarlas en la vista, quiero que utilicen photoswipe para mostrarlas en el móvil.

Tengo una directiva:

'use strict';

App.directive('photoswipe', function () {
return {
    replace: false,
    restrict: 'A',
    link: function photoSwipeLink(scope, element, attr) {
      scope.$watch(attr.photoswipe, function(value){
        angular.element('#gallery a').photoSwipe({
          enableMouseWheel: false,
          enableKeyboard: false
        });
      });
    }
  };
});

Me sale este error en la consola:

Code.PhotoSwipe.createInstance: No images to passed.

Supongo que esto se debe a que la directiva se está ejecutando antes de que la vista se haya procesado.

Si agrego un tiempo de espera de $ en lugar de verlo, entonces el código funciona. Desafortunadamente, esta solución no es buena, ya que podría haber una demora en obtener los datos de la API. Además, el código no funciona dentro del tiempo de espera.

He intentado, el código anterior, he intentado usar $ viewcontentloaded, he intentado activar la función después del último elemento en ng-repeat, pero ninguno funciona.

Cualquier ayuda sería muy apreciada.

EDITAR:

Aquí está el HTML.

<h1>{{ gallery.headline }}</h1>
<ul id="gallery" photoswipe>
  <li class="gallery" ng-repeat="image in gallery.images">
    <a href="{{ image.url }}" alt="image.caption">
      <img ng-src="{{ image.thumb_url }}" class="thumb" alt="{{ image.caption }}" style="display: block;">
      <h3 class="headline">{{ image.caption }}</h3>
    </a>
  </li>
</ul>