Question

我有大胆的弹出变焦效果的问题，我把我需要的每一个想法，我尝试每一个想法！我也使用AngularJS，ng-repeat，我在我的模板中打印图像

<div class="images" ng-repeat="cert in db.images">
    <a class="image-zoom" href="{{cert.image}}">
        <img ng-src="{{cert.image}}">
    </a>
</div>

然后我也放了script，但它不起作用。当我在<ng-view>之外使用magnific zoomer，在索引文件中，它可以工作，但是当我加载模板并尝试在那里使用magnific zoomer时，它不起作用。你能告诉我为解决这个小问题需要做些什么吗？

Answer 1

你是如何调用华丽弹出窗口的？您需要创建一个指令来调用元素上的大量弹出窗口，这样即使Angular动态注入元素，您也可以确保创建弹出窗口。

.directive('magnificImage', magnificImageDirective);

function maginificImageDirective() {
    return {
        restrict: 'A',
        link: function (scope, iElement) {
            scope.$evalAsync(function () {
                iElement.magnificPopup({
                    // ... magnific options
                });
            });
        }
    };
}

并且，在您的图片上应用此指令：

<div class="images" ng-repeat="cert in db.images">
    <a class="image-zoom" magnific-image href="{{ cert.image }}">
        <img ng-src="{{ cert.image }}">
    </a>
</div>

Magnific弹出式缩放效果不适用于AngularJS <ng-view>

1 个答案: