Wrapping Formstone Wallpaper jquery plugin in an AngularJS directive - angularjs

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.
Can someone help me to improve the code for the directive?

Answer 1

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