Angular directive for creating dynamic overlays over any element. Directive is automatically preparing parent to have an overlay, and dynamically sets the height of the overlay if the height of the parent will change. Second directive allows to set any element in the vertical and horizontal center of the parent element. It dynamically reposition…

Angular Overlay Directive

var overlayModule = angular.module('angular-overlay', []).directive('elementOverlay', [function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            $(elem[0].parentNode).css('position', 'relative');
            
            scope.$watch(function () {
                return $(elem[0].parentNode).height();
            }, function (v) {
                elem.css('height', v + 'px');
            });
        }
    };
}]).directive('elementCenter', [function () {
    return {
        restrict: 'A',
        link: function (scope, elem, attrs) {
            elem.css('position', 'absolute');
        
            scope.$watch(function () {
                return $(elem[0].parentNode).height();
            }, function (h) {
                var elementHeight = elem.height();
                elem.css('top', (h - elementHeight)/2);
            });
        
            scope.$watch(function () {
                return $(elem[0].parentNode).width();
            }, function (w) {
                var elementWidth = elem.width();
                elem.css('left', (w - elementWidth)/2);
            });
        }
    };
}]);