javascript - Angular 自定义指令不适用于外部 javascript 插件

Question

我正在创建一个自定义 Angular Directive(指令)，它将使用 Image Tilt Effect插入。

<tilt></tilt>

模板看起来像这样。

<li class="grid__item">
<div class="grid__img grid__img--example-1" >
    <img src="img/3.jpg" class="tilt-effect" alt="grid01" data-tilt-options='{ "opacity" : 0.3, "extraImgs" : 3, "movement": { "perspective" : 1200, "translateX" : -5, "translateY" : -5, "rotateX" : -5, "rotateY" : -5 } }' />
</div>

我遇到的问题是，当自定义指令注入(inject)页面时，我在页面底部加载的这个脚本似乎没有打开。

<script src="js/tiltfx.js"></script>

如果我尝试将脚本移动到自定义指令的 html 片段中，则会收到错误:$compile:tplrt

Answer 1

我为此创建了一个包装指令 Image Tilt Effect插件(fiddle)。

当你有一个需要在 Angular 中使用的 DOM 插件时，不要使用自动初始化，比如这个插件的 data-tilt-options，因为它们很难预测，并且可能会导致奇怪的行为，内存泄漏等...这个插件有一个手动初始化方法 - new TiltFx(element, options)，所以我们可以使用它。

另一个问题是这个插件必须等待 Angular 完成渲染，然后才能初始化。简单的修复方法就是使用 setTimeout 或 $timeout (如果我们需要更新摘要周期)，将 init 放在 JS 队列的末尾。我们还可以使用突变观察者来做到这一点，但这超出了这个答案的范围。

在 Angular 中使用 DOM 插件的一个令人不安的方面是内存泄漏。插件应该有某种清理机制。这个插件没有。因此，您必须检查内存泄漏，如果存在杂散事件处理程序，则在删除包装元素时将其删除。

指令代码:

appModule.directive('tilt', function tilt() {
    var ddo = {
        template: '<div class="grid__img"><img class="tilt-effect" ng-src="{{imgSrc}}" alt="The image" />',
        restrict: 'E',
        replace: true,
        scope: {
            imgSrc: '@', // the image src
            tiltOptions: '=?' // the tilt options object - optional
        },
        link: function (scope, $el) {
            var img = $el[0].querySelector('img.tilt-effect'); // find the img element
            var tilt;

            setTimeout(function () { // wait 'till directive is rendered
                tilt = new TiltFx(img, scope.tiltOptions); // apply tilt on image with options (if any)
            });

            $el.on('$destroy', function() {
                // use tilt variable to perform cleanup on wrapper and img if needed
                tilt = null;
            });
        }
    };

    return ddo;
});

用法:

<div ng-app="tilt">
    <tilt img-src="http://cdn.cutestpaw.com/wp-content/uploads/2013/12/Most-Famous-Felines-034.jpg" tilt-options='{ "opacity" : 0.3, "extraImgs" : 3, "movement": { "perspective" : 1500, "translateX" : -5, "translateY" : -5, "rotateX" : -5, "rotateY" : -5 } }'></tilt>
    <tilt img-src="http://www.cats.org.uk/uploads/images/pages/photo_latest14.jpg"></tilt>
</div>

不要忘记这个插件要求容器具有固定的宽度和高度，例如:

.grid__img {
    width: 400px;
    height: 400px;
}