angular height remainder

by abenrob

HTML

<div ng-app="MyApp" id="main">
    <div height-diff="#main" id="header">Stuff goes here</div>
    <div id="body" ng-style="remainderstyle"></div>
</div>

CSS

#main {
    height: 400px;
}
#header {
    background-color: yellow;
}
#body {
    background-color: lightblue;
}

JavaScript

var myApp = angular.module('MyApp', []);

myApp.directive('heightDiff',function () { 
    function link(scope, element, attrs) {
        scope.$watch(function(){
        var parentEl =  angular.element(document.querySelector(attrs.heightDiff));
        scope.remainderstyle = parentEl.length > 0 ? {
            height:(parentEl[0].offsetHeight - element[0].offsetHeight)+'px'
        } : null;
      });
    }
      return {
        restrict: 'AE',
        link: link
      };
});