Angular自定义指令不能与外部javascript插件一起工作

Angular custom directives not working with external javascript plugin

本文关键字：javascript 插件 一起 工作 外部 自定义 指令 不能 Angular      更新时间：2023-09-26

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

<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

我已经为此创建了一个包装器指令图像倾斜效果插件(小提琴)。

当你有一个DOM插件需要在angular中使用时，不要使用自动初始化，比如这个插件的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;
}

变化

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


<script ng-src="js/tiltfx.js"></script>
相关文章：