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

Question

我正在创建一个自定义的角度指令，它将使用“ 图像倾斜效果”插件。

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

我遇到的问题是，将自定义指令注入页面后，我正在页面底部加载的脚本似乎没有打开。

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

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

Answer 1

我为此图像倾斜效果插件（ fiddle ）创建了一个包装指令。

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

另一个问题是，该插件在初始化之前必须等待angular完成渲染。 简单的解决方法是使用setTimeout或$timeout （如果需要更新摘要循环），将init放在JS队列的末尾。 我们也可以使用变异观察者来做到这一点，但这超出了答案的范围。

在角度使用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;
}

Answer 2

更改

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

至

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