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>