Question

努力在我的AngularJS应用程序中实现Formstone Wallpaper JQuery插件。我按照网站上的说明了解AngularJS和JQuery不能很好地协同工作。在网上的许多文章中都提到我必须在AngularJS指令中包装jquery插件才能以正确的方式使用它。我在David Boike找到了关于如何将Knob jquery插件转换为AngularJS指令的本教程。

我试图跟随并实现Formstone壁纸插件。这是我的尝试：

'use strict';

angular.module('app').directive('formstoneWallpaper',[function() {
    return {
            restrict: 'E',
            link: function (scope, elem, attrs) {
                    elem.wallpaper({
                            source: {
                                    poster: attrs.poster,
                                    mp4: attrs.mp4,
                                    ogg: attrs.ogg,
                                    webm: attrs.webm
                            }
                    });
            }
    };
}]);

然后我的html标记变为：

<div class="container-fluid">
    <div class="row wall">

        <formstone-wallpaper
            poster="modules/launch/videos/ocean.jpg"
            mp4="modules/launch/videos/ocean.mp4"
            ogg="modules/launch/videos/ocean.ogv"
            webm="modules/launch/videos/ocean.webm"
        ></formstone-wallpaper>

    </div><!--row-->
</div><!--container-->

然而，这并不会产生所需的全宽响应视频壁纸。相反，width和height以某种方式设置为0px。因此，我在网站上看不到任何内容。但是，当我杀死wallpaper-container和wallpaper-media类时，问题得到了部分解决，因为视频终于出现了（但是，它没有响应和适应屏幕大小 - 我们这样做的原因首先锻炼）。以下是我的Chrome检查员的截图。 chrome

有人可以帮助我改进指令的代码吗？

Answer 1

朋友们，原来上面的指令实际上还不错。我遇到的真正问题是我对嵌套相对定位缺乏了解。我使用this "resize" directive动态地将容器的高度设置为视口的高度。

这是最终修复我的问题的CSS：

formstone-wallpaper {
        display: block;
        position: relative;
        width: auto;
        height: auto;
        padding: 100px 0;
        min-height: 100%;
        background: no-repeat center center;
        background-attachment: scroll;
        background-size: cover;
}

设置＆＃34;调整大小＆＃34;容器上的属性如下：

<div class="container-fluid" data-ng-style="style()" resize>
    <div class="row">

        <formstone-wallpaper
            poster="modules/launch/videos/ocean.jpg"
            mp4="modules/launch/videos/ocean.mp4"
            ogg="modules/launch/videos/ocean.ogv"
            webm="modules/launch/videos/ocean.webm"
        ></formstone-wallpaper>

    </div><!--row-->
</div><!--container-->

在AngularJS指令中包装Formstone Wallpaper jquery插件

1 个答案: