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

Question

努力在我的 AngularJS 应用程序中实现 Formstone Wallpaper JQuery 插件。我按照网站上的说明只是为了了解 AngularJS 和 JQuery 不能很好地协同工作。在网上的许多文章中都提到我必须将 jquery 插件包装在 AngularJS 指令中才能以正确的方式使用它。我在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 检查器的屏幕截图。

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

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

像这样在容器上设置“resize”属性：

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