Javascript AngularJS中的lightGallery（jQuery插件）

我正在尝试让lightGallery jQuery插件（）与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>

（我还尝试了

） 当我运行页面时，单击任何缩略图都不会发生任何事情。 不过，我可以在link函数中添加一个

警报（）

，然后显示出来

如何让AngularJS与jQuery和这个插件一起使用

更新：

经过一些调试后，似乎在模型绑定到视图之前执行了

jQuery（element）.lightGallery（）

。

---

因此，接下来的问题是，当所有内容都绑定时，而不是之前，如何调用指令。

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

HTML

这是演示，没有指令

HTML

---

适用于我。

使用两个指令的组合，您可以通过指令指定父级，以及将选项传递到范围变量，这为灯光库的更多自定义提供了机会。secondary指令触发父级绑定（使用@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;
        }
    }
})

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

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

        }
    }
})

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

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

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

        }
    }
})

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

生成的标记（在初始化Light Gallery时，通过指定

选择器

选项，可以是您想要的任何标记）：

---

工作起来很有魅力。谢谢DA跟进问题。lightGallery文档说明可以使用“数据”子html属性显示图像的标题。我将此属性添加到LI元素，但没有显示任何内容。我还尝试添加一个单独的div（在LI中）并引用它，但这也不起作用。关于使用AngularJS时如何使用字幕的任何提示？字幕对我来说很好。我认为你的标题div没有任何样式，所以它隐藏在图像后面。您可以使用lightGallery默认“.custom html”类，也可以自己应用css。这里是更新的啊，我错过了.customHTML类。如果我用该类将标题封装在一个div中，那么标题就会起作用。文档可能需要更新，因为上面说的

正是我所拥有的。嗯，为每个项目实例化多个

lightgallery

小部件不是吗？也许数字100就足够了。当然，这是非常不可靠的。在使用此功能的大型项目中，它已经完美地工作了2年。：）如何将lightGallery加载到AngularJS项目中？

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