title: Angular.js Client height
body: <p>I have an angular.j app, which has a view and a directive.  The various views used have different client height.  I am trying to place a default background on the view, while various views have different page heights.</p>
  
  <p>To place a background on the screen, I need to know the client window height, which is the minimum height that the background will be set to.  The height of the view, if this is bigger than the client height, the background would need expanding to cover the extra height.</p>
  
  <p>The view:
  index.html</p>
  
  <pre><code>&lt;body ng-app="myApp"&gt;
    &lt;div main-container&gt;&lt;/div&gt;
    &lt;script src=......&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The view controller
  js/app.js</p>
  
  <pre><code>var myApp = angular.module('myApp', ['ngRoute']);
  
  myApp
      .config(['$routeProvider', function($routeProvider) {
          $routeProvider
          .when('/', {
              templateUrl: 'views/home.html'
          })
          .otherwise({redirectTo: '/'
      });
  }]);
  </code></pre>
  
  <p>The Home view
  views/home.html</p>
  
  <pre><code>&lt;div style="height: 2000px"&gt;
    &lt;p&gt;Home View content&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The view directive for main-container
  js/directives/main.js</p>
  
  <pre><code>myApp.directive('mainContainer', ['$window', function($window) {
  return {
      link: function(scope, elem, attrs) {
          scope.onResize = function() {
              var header = document.getElementsByClassName('main-container')[0];
              elem.windowHeight = $window.innerHeight - header.clientHeight - 80;
              $(elem).height(elem.windowHeight);                
  
          }
          scope.onResize();
          angular.element($window).bind('resize', function() {
              scope.onResize();
          })
      }}
  }])
  </code></pre>
  
  <p>The view directive does not get the height of the view, it gets the client window height when ever the page is re-sized &amp; refreshed.  I would like to also get the view height, so that I can set the height of the container background to either the client height or view height, which ever is the bigger.</p>
  
  <p>I'd like to do is get the height of the view, as set in the home.html css, is there a way to do this?</p>
  
  <p>Please assist.</p>