Question

这是this topic的扩展名：

提供了相同的解决方案，但具有不同的方案：

带有图库的

ElevateZoom我有这种情况：

<img elevate-zoom ng-src="{{small_image}}" zoom-image="{{large_image}}" />
<div id="gallery">
 <a href="" ng-repeat="(key,value) in gallery track by $index" data-image="{{value.small_image}}" data-zoom-image="{{value.large_image}}">
    <img ng-src="{{value.small_image}}" style="height: auto; width: 100px" />
  </a>
</div>

使用此指令，基本上是相同的：

angular.module('app.directives.elevateZoom',[]).
directive('elevateZoom', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {

  //Will watch for changes on the attribute
  attrs.$observe('zoomImage',function(){
    linkElevateZoom();
  })

  function linkElevateZoom(){
    //Check if its not empty
    if (!attrs.zoomImage) return;
    console.log(attrs.zoomImage);
    element.attr('data-zoom-image',attrs.zoomImage);
    $(element).elevateZoom({gallery:'gallery'});
  }
  linkElevateZoom();
}
  };
    });

所以，我刚刚根据网站上的示例创建了图库，并设置参数以使用图库 - 但这确实有效。有什么想法吗？

由于

此外，如果有人需要控制器上的parms：

$scope.small_image = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png'
        $scope.large_image = 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image1.jpg';
        $scope.gallery = [
        {
            small_image: 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png',
            large_image: 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image1.jpg'
        },
        {
            small_image: 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image2.png',
            large_image: 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image2.jpg'
        },
        {
            small_image: 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image3.png',
            large_image: 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image3.jpg'
        },
        {
            small_image: 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image4.png',
            large_image: 'http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image4.jpg'
        },
    ]

用于ElevateZoom jQuery插件的AngularJS指令 - 使用Gallery

0 个答案: