Wie setze ich dynamisch Höhe auf Element?

Question

Ich versuche, dynamisch Höhe in meinem Demo-Element zu setzen .I werden Sie sagen, Ausgabe I statisch oder konstanten Wert von Höhe in meiner Demo nehmen .Ich nehmen 250px konstanten Wert

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

Aber ich brauche diese Höhe dynamisch aus dieser Höhe setzen $ scope.hgt auf min-Höhe #wrapper div .I .I bekam dynamisch

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

Aber ich muss hinzufügen? wollen nicht statischen Wert nehmen div height. Ich möchte dynamisch hinzufügen.

hier ist mein Code http://codepen.io/anon/pen/bdgawo

gleiche, was ich in der Winkel müssen, was wir in jquery tun

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

Answer 1

Sie könnten einfach diese durch eigene Richtlinie erreichen, die

dynamisch CSS hinzufügen wird Markierung

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

Richtlinie

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

Die bessere Lösung wäre man ng-Stil-Direktive verwenden könnte, die die Werte im JSON-Format erwartet.

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

Working Codepen

Answer 2

Die folgenden funktionieren sollte. Das Einfügen in das Codepanel-Snippet wird nicht angezeigt, da die Fenstergröße klein ist, so dass die Höhe aus dem Attribut min-height gezogen wird. Probieren Sie es in einem größeren Fenster aus.

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

Answer 3

dynamisch Höhe mit Header Fußzeile 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

Hier ist ein Beispiel für die Anwendung an anderen Elementen aktuellen Elementbreite ist.

Breite des Elements, das den Klassennamen „Container“ hat gelten flexibleCss Winkel js Richtlinie

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