Директива изменения размера окна

Я пытался сделать размер 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

Я все еще что-то не замечаю?

EDIT:

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

Это решение, похоже, работает, все еще заинтересовано в том, почему использование ngStyle не работает.

Ответ 1

Я думаю, что вы забыли запустить цикл дайджеста, вызвав scope.$apply(); в конце метода scope.onResize

В любом случае, я использовал следующую директиву (взятую из ЗДЕСЬ), которая работает для меня:

Попробуйте открыть представление отладки и изменить высоту просмотра: Demo Fiddle

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

[EDIT]

Здесь представлена демонстрация без библиотеки jQuery с помощью innerHeight

Демо 3 Fiddle

Ответ 2

Поскольку мы работаем с директивой, мы всегда можем выполнять некоторые манипуляции с 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/

Ответ 3

Прошло некоторое время с тех пор, как вы спросили, и вы, похоже, нашли свое решение для решения... но вы также спрашиваете, почему ng-style не работал:

ng-style, из Angular docs

Выражение, которое переходит к объекту, чьи ключи являются именами и значениями стиля CSS, являются соответствующими значениями для этих клавиш CSS.

Итак, в вашем примере в стиле ng вы предоставляете height : 375; (то есть, если windowHeight оценивается как 375), и это не правильное значение.

Это должно быть так, как вы это делали в своем обходном пути и иметь единицы.

windowHeight = ($ window.innerHeight - header.clientHeight) + "px";

Ответ 4

Функция внутренней ссылки дает

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


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

Ответ 5

Минималистский в CoffeeScript:

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

То же самое в Javascript.

Ответ 6

Вот еще одна версия без использования angular $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')
    });

Fiddle