come impostare dinamicamente l'altezza dell'elemento?

Question

Sto cercando di impostare dinamicamente altezza per elemento a mio demo .Io vi dirà problema che sto prendendo valore statico o costante di altezza nel mio demo .I prendere 250px valore costante

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

Ma ho bisogno per aggiungere questa altezza dinamicamente .ho avuto altezza da questo

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

ma ho bisogno di impostare $ scope.hgt al min-height a #wrapper div dinamicamente? .Io non vogliono prendere valore statico di div altezza. Voglio aggiungere dinamicamente.

Ecco il mio codice http://codepen.io/anon/pen/bdgawo

stessa cosa ho bisogno di in angolare quello che facciamo in jQuery

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

Answer 1

Si potrebbe semplicemente raggiungere questo obiettivo proprio direttiva a cui si aggiungeranno i CSS in modo dinamico

Markup

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

direttiva

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

La soluzione migliore sarebbe quella si potrebbe usare direttiva ng-stile che si aspetta che i valori in formato JSON.

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

Working Codepen

Answer 2

Il seguente dovrebbe funzionare. Inserendolo nello snippet codepen non verrà mostrato come la dimensione della finestra è piccola, quindi disegna l'altezza dall'attributo min-height. Provalo su una finestra più grande.

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

Answer 3

set altezza in modo dinamico con l'intestazione piè di pagina elemento? 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

Ecco un esempio per l'applicazione di altri elementi larghezza all'elemento corrente.

larghezza dell'elemento che ha il nome di classe "contenitore" si applicherà a div utilizzando flexibleCss js angolare direttiva

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