如何设置动态高度到元素？

Question

我试图在我的演示中将动态高度设置为元素.我会告诉你问题我在我的演示中采用静态或恒定的高度值.我取250px常数值

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

但是我需要动态添加这个高度.我从中获得了高度

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

但我需要动态地将$ scope.hgt设置为 min-height到#wrapper div吗？.我不想取div高度的静态值.我想动态添加.

这是我的代码 http://codepen.io/anon/pen/bdgawo

同样的事情,我需要在角度我们在jquery做什么

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

Answer 1

您可以通过自动指令实现这一点,该指令将动态添加css

标记

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

指示

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

更好的解决方案是你可以使用期望JSON格式的值的ng-style指令.

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

工作Codepen