AngularJS中的lightGallery（jQuery插件）

我正在尝试使用lightGallery jQuery插件（ http://sachinchoolur.github.io/lightGallery/index.html ）与AngularJS一起使用。

我发现一些答案表明我需要一个指令，所以我创建了以下内容：

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

然后在我看来我这样做：

（我也试过

）当我运行页面时，当我点击任何缩略图时没有任何反应。 我可以在链接function中放置一个alert() ，然后显示。

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

更新：

经过一些调试后，似乎在模型绑定到视图之前执行了jQuery(element).lightGallery() 。 那么问题就是如何在一切都被约束而不是之前得到一个指令来被调用。

Answer 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

这是demo plnkr

Answer 2

使用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选项，它可以是您真正喜欢的任何内容）：

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

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

Answer 3

没有指令..

HTML

JavaScript的

 // $http, Restangular whatever to return data in album.images // unbind before.. jQuery('#lightgallery').unbind().removeData(); // $timeout after $timeout(function () { jQuery('#lightgallery').lightGallery(); }, 100); 

适合我..