javascript - 장점 - jquery screen height




Angular.js:페이지로드시 요소 높이 설정 (6)

Bizzard의 탁월한 대답에 대한 약간의 개선. 엘리먼트의 폭 - 오프셋 및 / 또는 높이 - 오프셋을 지원하여 너비 / 높이에서 감산 될 정도를 결정하고 음수 치수를 방지합니다.

 <div resize height-offset="260" width-offset="100">

지령:

app.directive('resize', ['$window', function ($window) {
    return function (scope, element) {
        var w = angular.element($window);
        var heightOffset = parseInt(element.attr('height-offset'));
        var widthOffset = parseInt(element.attr('width-offset'));
        var changeHeight = function () {
            if (!isNaN(heightOffset) && w.height() - heightOffset > 0)
                element.css('height', (w.height() - heightOffset) + 'px');
            if (!isNaN(widthOffset) && w.width() - widthOffset > 0)
                element.css('width', (w.width() - widthOffset) + 'px');
        };
        w.bind('resize', function () {
            changeHeight();
        });
        changeHeight();
    }
}]);

편집 이것은 실제로 현대적인 브라우저에서 그것을하는 어리석은 방법입니다. CSS3에는 다음과 같이 계산을 CSS로 지정할 수있는 calc가 있습니다.

#myDiv {
 width: calc(100% - 200px);
 height: calc(100% - 120px);
}

http://caniuse.com/#search=calc

나는 앵귤러 초보자이다. 즉 높이를 창 높이에 따라 달라지는 그리드 (그리드를 사용)를 만들고 싶습니다. $('.gridStyle').height($(window).height() - 100);

필자는 지시서를 작성했다 :

app.directive('resize', function($window) {

    return function(scope, element) {

        function applyHeight() {
            scope.height = $window.innerHeight;
            $('.gridStyle').height(scope.height - 100);
        }

        angular.element($window).bind('resize', function() {
            scope.$apply(function() {
                applyHeight();
            });
        });

        applyHeight();
    };
});

브라우저 창 크기를 조정해도 사이트가 처음으로로드 될 때 스타일이 적용되지 않으면 잘 작동합니다. 어디에서 코드를 초기화 할 수 있습니까?


귀하의 ng-grid가 요소 parent (div, layout)에 종속 된 경우 해결책 :

지령

myapp.directive('sizeelement', function ($window) {
return{
    scope:true,
    priority: 0,
    link: function (scope, element) {
        scope.$watch(function(){return $(element).height(); }, function(newValue, oldValue) {
            scope.height=$(element).height();
        });
    }}
})

샘플 HTML

<div class="portlet  box grey" style="height: 100%" sizeelement>
    <div class="portlet-title">
        <h4><i class="icon-list"></i>Articles</h4>
    </div>
    <div class="portlet-body" style="height:{{height-34}}px">
        <div class="gridStyle" ng-grid="gridOrderLine" ="min-height: 250px;"></div>
    </div>
</div>

높이 -34 : 34는 내 제목 div의 높이를 수정 한 것입니다. 다른 높이를 고칠 수 있습니다.

쉬운 지침이지만 잘 작동합니다.



모든 다이제스트주기를 확인하지 않으려면 창 높이가 변경되면 div의 높이를 변경할 수 있습니다.

http://jsfiddle.net/zbjLh/709/

<div ng-app="miniapp" resize>
  Testing
</div>

.

var app = angular.module('miniapp', []);

app.directive('resize', function ($window) {
    return function (scope, element) {
        var w = angular.element($window);
        var changeHeight = function() {element.css('height', (w.height() -20) + 'px' );};  
            w.bind('resize', function () {        
              changeHeight();   // when window size gets changed             
        });  
        changeHeight(); // when page loads          
    }
})

$(document).ready(function() {
       scope.$apply(function() {
                applyHeight();
            });
});

또한 명령문 실행 전에 모든 스크립트가로드되었는지 확인합니다. 필요 없다면 사용할 수 있습니다.

$(window).load(function() {
       scope.$apply(function() {
                applyHeight();
            });
});

angular.element(document).ready(function () {
    //your logic here
});




angularjs