Как установить динамическую высоту элемента?

Я пытаюсь установить динамическую высоту для элемента в моей демонстрации. Я расскажу вам, что я делаю статическое или постоянное значение высоты в своей демонстрации. Я принимаю постоянное значение 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

то же самое, что мне нужно в angular, что мы делаем в jquery

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

Ответ 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);
    }
  }
})

Лучшим решением было бы использовать директиву ng-style, которая ожидает значения в формате JSON.

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

Рабочий Codepen

Ответ 2

Следующее должно работать. Вложение его в фрагмент кода не будет отображаться, так как размер окна невелик, поэтому он вытягивает высоту из атрибута min-height. Проверьте его на большее окно.

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

Ответ 3

установить динамическую высоту с нижним колонтитулом заголовка элемента? HTML

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

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

Ответ 4

Ниже приведен пример применения других элементов width к текущему элементу.

Ширина элемента, который имеет имя класса "container", будет применяться к div с помощью команды flexibleCss angular js

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