Wrapping Formstone Wallpaper jquery plugin in an AngularJS directive

Question

Trying hard to implement the 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 on how to warp the Knob jquery plugin into an AngularJS directive.

I tried to follow along and achieve that for the Formstone Wallpaper plugin. This is my attempt:

'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
                            }
                    });
            }
    };
}]);

Then my html markup changes to:

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

Yet this does not result in the desired full-width responsive video wallpaper. Instead the width and height is somehow set to 0px. I therefore do not see anything on my website. However, when I kill the wallpaper-container and wallpaper-media classes, the problem is partially resolved in that the video finally appears (however, it is not responsive and fittet to screen size-the reason why we are doing this exercise in the first place). Here is a screenshot from my chrome inspector. chrome

Can someone help me to improve the code for the directive?

score 1 · Accepted Answer · edited May 23 '17 at 11:44

friends, it turned out the above directive is actually alright. The real problem that I had was my lack of understanding of nested relative positioning. I used this "resize" directive to dynamically set the height of my container to the height of the viewport.

This is the css that finally fixes the my issue:

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

Set the "resize" attribute on your container like so:

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

Maybe someone has a better way of doing this in which case I will be accepting your answer. If not, 3 months from now, I'll be accepting this one. — soosap, Feb 13 '15 at 09:03

Wrapping Formstone Wallpaper jquery plugin in an AngularJS directive

1 Answers1