javascript - When to get height angular-populated div -
javascript - When to get height angular-populated div -
i have content within div populated using ng-bind, calculation based on height of div. i'm doing using directive. however, directive's dom selector end initial height of div (without content populated).
so, how/when can actual height of div after population?
here relevant code:
<div class="main-header" fit-screen> <img class="full-height" ng-src="{{ data.images.cover.image_url }}" alt="{{ data.description.name }}" /> </div> <div class="product-basic-info-container"> <!--all content populated using ng-bind--> <h1 class="product-name" ng-bind="data.description.name"></h1> <h2 class="product-desc" ng-bind="data.description.summary"></h2> <div class="product-price clearfix"> <span class="price now-price" ng-bind="'¥' + data.prices.price"></span> <a ng-href="{{ data.buy_url }}" class="form-button buy-button">buy</a> </div> </div> var fitscreendir = function() { homecoming { link : function() { /* fit both header , basic info 1 page */ var viewport_height = document.documentelement.clientheight; var header_elem = document.queryselector( '.main-header' ); var product_info_elem = document.queryselector( '.product-basic-info-container' ); var product_info_height, result_height, original_height, new_css; /* basic info height , substract viewport height */ product_info_height = product_info_elem.offsetheight; result_height = ( viewport_height - product_info_height ); /* set new height */ new_css = { 'height' : result_height + 'px' }; angular.element( header_elem ).css( new_css ); } }; }; app.directive( 'fitscreen', fitscreendir );
i'm guessing trying retrieve height in body of link
function of directive. before div populated whatever binding to.
you can set watch on scope , execute function whenever value changes (read more here https://docs.angularjs.org/api/ng/type/$rootscope.scope). bindedproperty
needs available on scope of directive.
scope.$watch('bindedproperty', function(newvalue, oldvalue) { if (newvalue === oldvalue) return; // el.height(); })
javascript css angularjs
Comments
Post a Comment