AngularJS 中的 lightGallery（jQuery 插件）答案

【问题标题】：lightGallery (jQuery plugin) in AngularJSAngularJS 中的 lightGallery（jQuery 插件）
【发布时间】：2015-05-13 16:11:01
【问题描述】：

我正在尝试让 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() 在模型绑定到视图之前执行。所以接下来的问题是我如何在所有内容都绑定时而不是之前调用指令。

【问题讨论】：

如何将 lightGallery 加载到 AngularJS 项目中？

标签： javascript jquery angularjs jquery-plugins lightgallery

【解决方案1】：

在 ng-repeat 完成渲染后调用 lightGallery。
您可以像这样修改指令

.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

【讨论】：

像魅力一样工作。谢谢！ :D
一个后续问题。 lightGallery 文档指出您可以使用 data-sub-html 属性来显示图像的标题。我将此属性添加到 LI 元素，但没有显示任何内容。我还尝试添加一个单独的 div（在 LI 内）并引用它，但这也不起作用。关于在使用 AngularJS 时如何使用字幕的任何提示？
字幕对我来说很好用。我认为您的标题 div 没有任何样式，因此它隐藏在图像后面。您可以使用 lightGallery 默认的“.custom-html”类，也可以自己应用 css。这是更新的plnkr
啊，我错过了 .custom-html 类。如果我将我的标题封装在具有该类的 div 中，则标题将起作用。文档可能需要更新，因为 <li data-sub-html="<h3>My caption</h3><p>My description..</p>" /> </li> 这正是我所拥有的。
呃，这不是为每个项目实例化多个lightgallery 小部件吗？

【解决方案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);

为我工作..

【讨论】：

也许 100 号对您来说已经足够了。当然这是非常不可靠的
没有。在使用此功能的大型项目中，它已经完美运行了 2 年。 :)
不知何故只有这个解决方案解决了我的问题，也许还有其他方法可以做到。或许除了removeData 之外，应该有一种方法可以摧毁灯光画廊的实例。更好的方法是将其包装在 angularjs 指令中。

【解决方案3】：

使用 2 个指令的组合允许您通过指令指定父级，以及将选项传递给作用域变量，这为更多自定义 Light Gallery 提供了机会。二级指令触发父级绑定（使用@Clr的解决方案中提出的相同想法）

该指令用于父元素，您可以传递一个galleryOptions范围变量，该变量在绑定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;
        }
    }
})

此指令适用于 Light Gallery 中的每个“项目”：

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

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

        }
    }
})

生成的标记（通过在初始化 Light Gallery 时指定 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>

而 options 可以是任何有效的 Light Gallery 选项，例如：

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

【讨论】：