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

Question

努力实现关于如何将 Knob jquery 插件变形为 AngularJS 指令的 Formstone Wallpaper JQuery plugin into my AngularJS application. I followed the instructions on the site just to learn that AngularJS and JQuery don't work well together. In many articles in the net it was mentioned that I had to wrap jquery plugins in AngularJS directives to use it the right way. I found this tutorial by David Boike。

我试着跟随并为 Formstone Wallpaper 插件实现它。这是我的尝试：

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

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

Wrapping Formstone Wallpaper jquery plugin in an AngularJS directive

angularjs

jquery-plugins

angularjs-directive