Я знаю, что об этом спрашивали тысячу раз, но я думаю, что перепробовал каждое прочитанное решение, и я не могу заставить его работать.

У меня есть API, из которого я получаю свои изображения, после того, как я вытащил изображения в вид, я хочу, чтобы они использовали photoswipe для отображения на мобильном телефоне.

У меня есть директива:

'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
        });
      });
    }
  };
});

Я получаю эту ошибку в консоли:

Code.PhotoSwipe.createInstance: No images to passed.

Я предполагаю, что это потому, что директива работает до того, как представление отрисовывается.

Если я добавлю $ timeout вместо watch, тогда код заработает. К сожалению, это решение бесполезно, так как может возникнуть задержка при получении данных из API. Кроме того, код не работает в течение тайм-аута.

Я пробовал, приведенный выше код, я пытался использовать $ viewcontentloaded, пробовал запускать функцию после последнего элемента в ng-repeat, но ни одна из них не работает.

Любая помощь приветствуется.

РЕДАКТИРОВАТЬ:

Вот 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>