it-swarm.com.ru

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

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

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

22
Pankaj Parkar

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

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

динамически установить высоту с нижним колонтитулом для элемента? 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()));
            }
        }
    }
})
1
Chirag Suthar

Вот пример применения ширины других элементов к текущему элементу.

Ширина элемента с именем класса «container» будет применяться к div с использованием угловой js-директивы FlexibleCss

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