창 크기 조정 지시문

창 크기 조정 지시문

윈도우 사이즈가 변경되면 div 크기를 조정하려고 했는데, 둘러본 결과 디렉티브를 사용하는 것이 가장 좋은 해결책이었던 것 같습니다.

템플릿:

<div elHeightResize ng-view ng-style="{ height: windowHeight }"></div>

지시:

myApp.directive('elheightresize', ['$window', function($window) {
    return {
        link: function(scope, elem, attrs) {
            scope.onResize = function() {
                var header = document.getElementsByTagName('header')[0];
                elem.windowHeight = $window.innerHeight - header.clientHeight;
            }
            scope.onResize();

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

로그인을 할 수 있는 동안elem.windowHeight에scope.onResize에 적용되지 않는 것 같습니다.ngStyle

내가 아직도 뭔가를 간과하고 있는 걸까?

편집:

<div ng-view resize style="height: {{ windowHeight }}px">

이 솔루션은 효과가 있는 것 같습니다만, 이 솔루션을 사용하는 이유에 대해서는 여전히 관심이 있습니다.ngStyle효과가 없었습니다.

전화하는 걸 잊어버린 것 같은데scope.$apply();의 마지막에scope.onResize방법

어쨌든, 다음의 지시(에서 발췌)를 사용하고 있습니다.

디버그 뷰를 열고 뷰 높이를 변경해 보십시오: 데모

app.directive('resize', function ($window) {
    return function (scope, element, attr) {

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

            scope.resizeWithOffset = function (offsetH) {

                scope.$eval(attr.notifier);

                return { 
                    'height': (newValue.h - offsetH) + 'px'
                    //,'width': (newValue.w - 100) + 'px' 
                };
            };

        }, true);

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

용도:

 <div  ng-style="resizeWithOffset(165)" 
       resize 
        notifier="notifyServiceOnChage(params)"
   >
    /** ... */
 </div>

더미 컨트롤러 방식 사용:

$scope.notifyServiceOnChage = function(){
      console.log($scope.windowHeight);   
 };

[편집]

다음은 를 사용하여 jQuery 라이브러리를 사용하지 않는 데모입니다.innerHeight

데모Fiddle 3

디렉티브를 사용하기 때문에 디렉티브 내의 요소의 높이를 변경함으로써 언제든지 DOM 조작을 실행할 수 있습니다.

예:

var app=angular.module('App', []);
app.directive('elheightresize', ['$window', function($window) {
    return {
        link: function(scope, elem, attrs) {
            scope.onResize = function() {
                var header = document.getElementsByTagName('header')[0];
                elem.windowHeight = $window.innerHeight - header.clientHeight;
                $(elem).height(elem.windowHeight);
            }
            scope.onResize();

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

라이브 예:http://jsfiddle.net/choroshin/FJvyb/

오랜만이네요, 해결 방법이 나온 것 같습니다만...하지만 당신은 또한 이유를 묻는다.ng-style동작하지 않음:

ng-style, Angular docs에서

키가 CSS 스타일 이름 및 값인 객체에 대한 표현은 이러한 CSS 키에 대응하는 값입니다.

따라서 ng 스타일의 예에서는 다음을 제공합니다.height : 375;(즉, 창이높이가 375)로 평가되어 적절한 값이 아닙니다.

회피책과 마찬가지로 유닛이 있어야 합니다.

windowHeight = ($window.innerHeight - header.client)높이) + "px";

CoffeeScript의 미니멀리스트:

app.directive "applyOnResize", ($window) ->
  ($scope, $element) ->
    $element($window).bind("resize", $scope.$apply)

Javascript에서도 동일.

내부 링크 함수 제공

scope.onResize = function() {
            var header = document.getElementsByTagName('header')[0];
            elem.windowHeight = $window.innerHeight - header.clientHeight;
        }


$window.onresize = function(){scope.onResize();scope.$apply();}

다음은 각도 $watch를 사용하지 않는 다른 버전으로, 윈도우 크기 변화를 보고 싶을 뿐입니다.

function resize () {

        var windowHeight = window.innerHeight,
            windowWidth  = window.innerWidth;

        scope.windowHeight = windowHeight;
        scope.windowWidth  = windowWidth;

        console.log('w.innerHeight', windowHeight);
        console.log('w.innerWidth', windowWidth);

        //** If want to apply style on element, can do something like:
        var elemStyle = {
            width: windowWidth + 'px',
            height: windowHeight + 'px'
        };

        element.css(elemStyle);
    }       
    resize();

    //** On resize
    window.onresize = function () {
        resize();
        scope.$apply();
    }

    //** Destroy
    scope.$on('$destory', function () {
        window.off('resize')
    });  

만지작거리다

언급URL : https://stackoverflow.com/questions/23044338/window-resize-directive