how to set dynamically height to element?

Question

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

 #wrapper{
    background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0);
    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;
alert($scope.hgt)

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 http://codepen.io/anon/pen/bdgawo

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

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

Answer 1

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

Markup

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

Directive

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

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>
</div>

Working Codepen

Answer 2

The following should work. Putting it in the codepen snippet won't show as the window size is small so it draws height from the min-height attribute. Test it out on a bigger window.

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

Answer 3

set dynamically height with header footer to element? HTML

<div class="content-wrapper" win-height>
</div>

JS

app.directive('winHeight', function ($window) {
    return{
        link: function (scope, element, attrs) {
            angular.element(window).resize(function () {
                scope.winHeight();
            });
            setTimeout(function () {
                scope.winHeight();
            }, 150);
            scope.winHeight = function () {
                element.css('min-height', angular.element(window).height() - 
                (angular.element('#header').height() + 
                 angular.element('#footer').height()));
            }
        }
    }
})

Answer 4

Here is an example for applying other elements width to current element.

Width of the element which has the class name "container" will apply to div using flexibleCss angular js directive

<div flexible-width widthof="container">
</div>

myApp.directive('flexibleWidth', function(){

    return function(scope, element, attr) {
            var className = attr.widthof; 
            var classWidth = angular.element(document.querySelectorAll('.'+className)[0])[0].clientWidth;
            element.css({ 
                 width: classWidth+ 'px' 
             });
            };
   });