Ich weiß, das wurde schon tausend Mal gefragt, aber ich glaube, ich habe jede Lösung ausprobiert, die ich gelesen habe, und ich kann sie anscheinend nicht zum Laufen bringen.

Ich habe eine API, über die ich meine Bilder abrufen kann. Nachdem ich die Bilder in die Ansicht gezogen habe, soll Photoswipe für die Anzeige auf Mobilgeräten verwendet werden.

Ich habe eine Richtlinie:

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

Ich bekomme diesen Fehler in der Konsole:

Code.PhotoSwipe.createInstance: No images to passed.

Ich vermute, das liegt daran, dass die Direktive ausgeführt wird, bevor die Ansicht gerendert wurde.

Wenn ich ein $ timeout anstelle von watch hinzufüge, funktioniert der Code. Leider ist diese Lösung nicht gut, da es zu Verzögerungen beim Abrufen der Daten von der API kommen kann. Außerdem funktioniert der Code nicht innerhalb des Timeouts.

Ich habe den obigen Code ausprobiert, ich habe versucht, $ viewcontentloaded zu verwenden, habe versucht, die Funktion nach dem letzten Element in ng-repeat auszulösen, aber es funktioniert nicht.

Jede Hilfe wäre sehr dankbar.

BEARBEITEN:

Hier ist das 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>