lightGallery (jQuery插件)在AngularJS中

Question

我正在尝试让lightGallery jQuery插件(http://sachinchoolur.github.io/lightGallery/index.html)与AngularJS一起工作。

我找到了一些提示我需要指令的答案，所以我创建了以下内容：

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

在我看来我是这样做的：

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

(我也尝试使用<ul light-gallery>)当我运行页面时，单击任何缩略图都不会发生任何事情。不过，我可以在链接函数中放置一个alert()，并显示该函数。

我如何让AngularJS与jQuery和这个插件一起玩呢？

更新：

经过一些调试后，似乎在模型绑定到视图之前执行了jQuery(element).lightGallery()。那么问题是，当所有的东西都是绑定的，而不是以前，我如何才能得到一个指令来调用。

Answer 1

调用lightGallery，一旦ng-重复完成呈现.

您可以这样修改指令

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

下面是演示plnkr

Answer 2

没有指令..。

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

为我工作..。

Answer 3

通过使用两个指令的组合，您可以通过指令指定一个父变量，并将选项传递给一个作用域变量，这为光明库的更多定制提供了机会。辅助指令触发父程序绑定(使用@Clr解决方案中提出的相同想法)

这个指令是针对父元素的，您可以传递一个galleryOptions作用域变量，该变量只是在绑定光明库时传递的：

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

此指令适用于光画廊中的每个“项”：

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

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

        }
    }
})

生成的标记(在初始化光明库时指定selector选项，可以是任何您想要的)：

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

鉴于选项可能是任何有效的光线画廊选项，例如：

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