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

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>

然后我也放了 magnific 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>

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

Magnific popup zoom effect doesn`t work with AngularJS <ng-view>

angularjs

magnific-popup