javascript - Angular.js Client height -
i have angular.j app, has view , directive. various views used have different client height. trying place default background on view, while various views have different page heights.
to place background on screen, need know client window height, minimum height background set to. height of view, if bigger client height, background need expanding cover height.
the view: index.html
<body ng-app="myapp"> <div main-container></div> <script src=......></script> </body> the view controller js/app.js
var myapp = angular.module('myapp', ['ngroute']); myapp .config(['$routeprovider', function($routeprovider) { $routeprovider .when('/', { templateurl: 'views/home.html' }) .otherwise({redirectto: '/' }); }]); the home view views/home.html
<div style="height: 2000px"> <p>home view content</p> </div> the view directive main-container js/directives/main.js
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(); }) }} }]) the view directive not height of view, gets client window height when ever page re-sized & refreshed. view height, can set height of container background either client height or view height, ever bigger.
i'd height of view, set in home.html css, there way this?
please assist.
i'd suggest put directive attribute on ng-view element, directive needs changes. in order call calculation function height scope.onresize need call on element.on('load') ensure every time view changes call scope.onresize function.
directive
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', scope.onresize); //below function call on view change in ng-view element.on('load', function(){ $scope.$apply(scope.onresize); }) }} }]) 
Comments
Post a Comment