3

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

4

3 回答 3

11

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

于 2015-05-15T11:05:05.903 回答
0

没有指令..

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

为我工作..

于 2015-10-09T21:00:02.597 回答
0

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

        }
    }
})

selector生成的标记（通过在初始化 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>

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

$scope.galleryOptions = {
    selector: '.file-trigger',
    ...
};
于 2017-04-13T19:37:20.627 回答