jak ustawić dynamicznie wysokość elementu?

Question

Próbuję ustawić dynamicznie Wysokość do elementu w moim demo .I powie wydać Biorę statyczną lub stałą wartość wysokości w moim demo .I wziąć 250px stałej wartości

#wrapper{ 
    background-image: url(https://dl.dropboxusercontent.com/s/nz1fzunlqzzz7uo/login_bg.png?dl=0); 
    min-height: 250px; 
    background-repeat: no-repeat; 
} 

ale muszę aby dodać tę wysokość dynamicznie .I got wysokość od tego

$scope.hgt =$window.innerHeight/3; 
alert($scope.hgt) 

Ale muszę ustawić $ scope.hgt do min-wysokość do #wrapper div dynamicznie? .I nie chcą przyjąć wartości statyczne wysokość div. Chcę dodać dynamicznie.

tutaj jest mój kod http://codepen.io/anon/pen/bdgawo

samo muszę w kanciaste, co robimy w jQuery

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

Answer 1

Można łatwo osiągnąć poprzez własny dyrektywy, która będzie dodać css dynamicznie

Znacznik

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

dyrektywa

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

Lepszym rozwiązaniem byłoby można użyć dyrektywy ng stylu, który oczekuje wartości w formacie JSON.

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

Working Codepen

Answer 2

Poniższy powinno działać. Umieszczenie go we fragmencie kodu codepen nie będzie wyświetlane, ponieważ rozmiar okna jest mały, więc rysuje wysokość od atrybutu min-height. Przetestuj to na większym oknie.

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

Answer 3

ustawić dynamicznie wysokość ze stopką nagłówka do elementu? 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

Oto przykład stosowania innych elementów szerokość aktualnego elementu.

szerokość elementu, który ma nazwę klasy „pojemnik” będą miały zastosowanie do div przy użyciu flexibleCss kątowe js dyrektywę

<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' 
      }); 
      }; 
    });