user944513 user944513 - 1 year ago 378
AngularJS Question

how to set dynamically height to element?

I am trying to set dynamically height to element in my demo .I will tell you issue I am taking static or constant value of height in my demo .I take 250px constant value

background-image: url(;
min-height: 250px;
background-repeat: no-repeat;

But I need to add this height dynamically .I got height from this

$scope.hgt =$window.innerHeight/3;

But I need to set $scope.hgt to min-height to #wrapper div dynamically?.I don't want to take static value of div height .I want to add dynamically .

here is my code

same thing i need to in angular what we do in jquery

$('#wrapper').css('height': $window.innerHeight / 3)

Answer Source

You could simply achieve this by own directive which will add css dynamically


<div id="wrapper" set-height>
  <h4 class="headerTitle">tell Mother name</h4>


.directive('setHeight', function($window){
    link: function(scope, element, attrs){
        element.css('height', $window.innerHeight/3 + 'px');

The better solution would be you could use ng-style directive that expects the values in JSON format.

<div id="wrapper" ng-style="{height: hgt+ 'px'}">
  <h4 class="headerTitle">tell Mother name</h4>

Working Codepen

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download