HTML:
<ons-template id="tou.html">
<ons-page modifier="tou" ng-controller="tou">
<ons-toolbar class="tou_toolbar">
<div class="center tou_header_title">Terms of Use</div>
</ons-toolbar>
<ons-scroller style="width: 100%;" scroll-height>
<ng-include src="'lib/templates/terms_of_use.html'"></ng-include>
</ons-scroller>
</ons-page>
</ons-template>
JS:
var app = angular.module('app', ['onsen']);
app.directive('scrollHeight',function(){
return {
link: function(scope,element,attr){
// newHeight needs to be the window-height (minus) ons-toolbar height
var newHeight = 400;
element.css('height', newHeight);
}
}
});
What i am trying to accomplish is to dynamically adjust the scroll height of the content window by calculating the viewable window height and subtracting the tool-bar height. I am kinda lost as to how i can do this the proper AngularJS way without using any Jquery, or at least using it in the proper way.
How do i get the full viewable window height?
How do i get the height of the tool-bar element inside the scrollHeight directive?
Secondly - this is for a mobile app so the viewport will not dynamically change but i still need to calculate the scrollable height on app startup.
Any help or guidance in the right direction is really appreciated.
PS - the html snippet is nested inside a larger <ng-app="app">
