Wiem, że zostało to zadane tysiąc razy, ale myślę, że wypróbowałem każde rozwiązanie, które przeczytałem i nie mogę go uruchomić.

Mam interfejs API, z którego otrzymuję moje zdjęcia, po pobraniu obrazów do widoku chcę, aby użyli photoswipe do wyświetlania na telefonie komórkowym.

Mam dyrektywę:

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

Dostaję ten błąd w konsoli:

Code.PhotoSwipe.createInstance: No images to passed.

Domyślam się, że dzieje się tak, ponieważ dyrektywa działa przed wyświetleniem widoku.

Jeśli zamiast zegarka dodam limit czasu $, kod działa. Niestety to rozwiązanie nie jest dobre, ponieważ może wystąpić opóźnienie w uzyskaniu danych z API. Ponadto kod nie działa w ramach limitu czasu.

Próbowałem powyższego kodu, próbowałem za pomocą $ viewcontentloaded, próbowałem wypalania funkcji po ostatnim elemencie w ng-repeat, ale nie działają.

Każda pomoc byłaby bardzo mile widziana.

EDYTOWAĆ:

Oto 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>