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

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

아임앵글JS 신입사원창 높이에 따라 높이가 달라지는 그리드(ng-grid 사용)를 만들고 싶다. $('.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();
    };
});

브라우저 창의 크기를 조정할 때는 잘 작동하지만 사이트를 처음 로드할 때는 스타일이 적용되지 않습니다.키를 초기화하려면 코드를 어디에 넣어야 하나요?

같은 문제에 대한 해결책을 찾다가 우연히 당신의 글을 보게 되었습니다.저는 몇 개의 투고에 근거한 지시로 다음과 같은 솔루션을 정리했습니다.여기서 시험해 보세요(브라우저 창의 크기를 변경해 보십시오).http://jsfiddle.net/zbjLh/2/

표시:

<div ng-app="miniapp" ng-controller="AppController" ng-style="style()" resize>
    window.height: {{windowHeight}} <br />
    window.width: {{windowWidth}} <br />
</div>

컨트롤러:

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

function AppController($scope) {
    /* Logic goes here */
}

app.directive('resize', function ($window) {
    return function (scope, element) {
        var w = angular.element($window);
        scope.getWindowDimensions = function () {
            return { 'h': w.height(), 'w': w.width() };
        };
        scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {
            scope.windowHeight = newValue.h;
            scope.windowWidth = newValue.w;

            scope.style = function () {
                return { 
                    'height': (newValue.h - 100) + 'px',
                    'width': (newValue.w - 100) + 'px' 
                };
            };

        }, true);

        w.bind('resize', function () {
            scope.$apply();
        });
    }
})

참고로 원래 컨트롤러(http://jsfiddle.net/zbjLh/),)에서 동작하고 있었는데, 이후 읽어본 결과 Angular의 관점에서 쿨하지 않다는 것을 알게 되었기 때문에 디렉티브를 사용하도록 변환했습니다.

중요한 것은,truegetWindowDimensions return 객체의 동일성을 비교하기 위한 'watch' 함수의 끝에 있는 플래그입니다(개체를 사용하지 않으면 제거하거나 false로 변경).

모든 다이제스트 사이클을 체크하지 않도록 윈도우 높이가 변경될 때 디바이의 높이를 변경할 수 있습니다.

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

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

Bichard의 훌륭한 답변에 대한 약간의 개선.요소의 폭 오프셋 및/또는 높이 오프셋을 지원하여 폭/높이에서 감산할 양을 결정하고 음의 치수를 방지합니다.

 <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=개요

다음 플러그인이 필요한 것 같습니다.https://github.com/yearofmoo/AngularJS-Scope.onReady

기본적으로 범위 또는 데이터가 로드된 후 지시 코드를 실행할 수 있는 기능을 제공합니다(예: $scope).$준비완료시

matty-j 제안과 질문의 일부를 조합하여 데이터 로드 후 그리드 크기를 조정하는 데 초점을 맞춘 코드입니다.

HTML:

<div ng-grid="gridOptions" class="gridStyle"></div>

지시사항은 다음과 같습니다.

angular.module('myApp.directives', [])
    .directive('resize', function ($window) {
        return function (scope, element) {

            var w = angular.element($window);
            scope.getWindowDimensions = function () {
                return { 'h': w.height(), 'w': w.width() };
            };
            scope.$watch(scope.getWindowDimensions, function (newValue, oldValue) {

                // resize Grid to optimize height
                $('.gridStyle').height(newValue.h - 250);
            }, true);

            w.bind('resize', function () {
                scope.$apply();
            });
        }
    });

컨트롤러:

angular.module('myApp').controller('Admin/SurveyCtrl', function ($scope, $routeParams, $location, $window, $timeout, Survey) {

    // Retrieve data from the server
    $scope.surveys = Survey.query(function(data) {

        // Trigger resize event informing elements to resize according to the height of the window.
        $timeout(function () {
            angular.element($window).resize();
        }, 0)
    });

    // Configure ng-grid.
    $scope.gridOptions = {
        data: 'surveys',
        ...
    };
}

ng-grid가 부모 요소(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>

height-34 : 34는 내 타이틀 div의 높이를 고정하고 다른 높이를 고정할 수 있습니다.

그것은 쉬운 지시이지만 잘 작동한다.

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

이렇게 하면 문을 실행하기 전에 모든 스크립트가 로드됩니다.필요없으면 사용가능합니다.

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

언급URL : https://stackoverflow.com/questions/14703517/angular-js-set-element-height-on-page-load