js-screen-height-directive.js

js-screen-height-directive.js

// Fixes the height of an element to be at least the height of the current
// screen, minus it's current offset (so it fills the screen vertically).
powell.directive('jsScreenHeight', function () {
  var $window = angular.element(window);

  return {
    restrict: 'C',
    link: function (scope, element) {
      var resize = function () {
        // TODO: don't require jquery just for computing the offset
        var top = Math.round(element.offset().top);
        element.css('height', window.innerHeight - top + 'px');
      };
      resize();

      $window.on('resize', resize);
      $window.on('orientationchange', resize);

      element.on('$destroy', function () {
        $window.off('resize', resize);
        $window.off('orientationchange', resize);
      });

      scope.$on("jsScreenHeight:update", resize);
    }
  };
});