Wrapping Formstone Wallpaper jquery plugin in an AngularJS directive

Vote count:

0

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="videos/ocean.jpg"
            mp4="videos/ocean.mp4"
            ogg="videos/ocean.ogv"
            webm="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.

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

asked 15 secs ago

soosap

43

Wrapping Formstone Wallpaper jquery plugin in an AngularJS directive