javascript - album - lightGallery(plugin jQuery) en AngularJS

vanilla js image gallery

Question

Estoy tratando de obtener el plugin lightGallery jQuery ( http://sachinchoolur.github.io/lightGallery/index.html ) para trabajar con AngularJS.

Encontré algunas respuestas que sugerían que necesitaba una directiva, así que creé lo siguiente:

.directive(''lightGallery'', function() {
    return {
        restrict: ''A'',
        link: function(scope, element, attrs) {
            jQuery(element).lightGallery();
        }
    };
})

Entonces, en mi opinión, hago esto:

<ul lightGallery>
    <li ng-repeat="photo in album.photos" data-src="{{photo.fullres}}">
        <img ng-src="{{photo.thumbnail}}" />
    </li>
</ul>

(También probé con <ul light-gallery> ) Cuando ejecuto la página no sucede nada cuando hago clic en cualquiera de las miniaturas. Sin embargo, puedo poner una alert() en la función de enlace, y eso se muestra.

¿Cómo puedo hacer que AngularJS juegue junto con jQuery y este complemento?

ACTUALIZAR:

Después de algunas depuraciones, parece que jQuery(element).lightGallery() se ejecuta antes de que el modelo se vincule a la vista. Entonces, la pregunta es cómo puedo llamar a una directiva cuando todo está atado y no antes.

Answer 1

Llame a lightGallery una vez que ng-repeat haya terminado de renderizar.
Puedes simplemente modificar la directiva como esta

.directive(''lightgallery'', function() {
  return {
    restrict: ''A'',
    link: function(scope, element, attrs) {
      if (scope.$last) {

        // ng-repeat is completed
        element.parent().lightGallery();
      }
    }
  };
});

HTML

<ul>
  <li lightgallery ng-repeat="photo in photos" data-src="{{photo.fullres}}">
    <img ng-src="{{photo.thumbnail}}" />
  </li>
</ul>

Aquí está la demo plnkr

Answer 2

sin directiva ...

HTML

<ul id="lightgallery">
  <li ng-repeat="image in album.images" data-src="{{imagem.fullres}}">
    <img ng-src="{{image.thumbnail}}" />
  </li>
</ul>

JavaScript

// $http, Restangular whatever to return data in album.images

// unbind before..
jQuery(''#lightgallery'').unbind().removeData();

// $timeout after
$timeout(function () {
  jQuery(''#lightgallery'').lightGallery();
}, 100);

Funciona para mi..

Answer 3

El uso de una combinación de 2 directivas le permite especificar un padre a través de una directiva, así como también pasar opciones a una variable de ámbito, lo que brinda la oportunidad de una mayor personalización de Light Gallery. La directiva secundaria activa al padre para enlazar (usando la misma idea presentada en la solución de @Clr)

Esta directiva es para el elemento padre, y puede pasar una variable de ámbito galleryOptions que simplemente se transfiere al enlazar Light Gallery:

.directive(''lightGallery'', function() {
    return {
        restrict: ''A'',
        scope: {
            galleryOptions: ''=''
        },
        controller: function($scope) {

            this.initGallery = function() {
                $scope.elem.lightGallery($scope.galleryOptions);
            };

        },
        link: function(scope, element, attr) {
            scope.elem = element;
        }
    }
})

Esta directiva es para cada "artículo" en la Galería de Luz:

.directive(''lightGalleryItem'', function() {
    return {
        restrict: ''A'',
        require: ''^lightGallery'',
        link: function (scope, element, attrs, ctrl) {

            if (scope.$last) {
                ctrl.initGallery();
            }

        }
    }
})

El marcado resultante (que realmente puede ser cualquier cosa que desee al especificar la opción de selector al inicializar Light Gallery):

<ul light-gallery gallery-options="galleryOptions">
    <li ng-repeat="photo in album.photos" data-src="{{photo.fullres}}" light-gallery-item>
        <img ng-src="{{photo.thumbnail}}" />
    </li>
</ul>

Mientras que las opciones pueden ser cualquier opción válida de Light Gallery, como por ejemplo:

$scope.galleryOptions = {
    selector: ''.file-trigger'',
    ...
};