窗口调整大小指令

Question

我试图在窗口调整大小时调整 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();
            })
        }
    }
}])

虽然我可以在scope.onResize 中记录elem.windowHeight，但它似乎不适用于ngStyle

我还是忽略了什么吗？

编辑：

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

这个解决方案似乎有效，但仍然对使用 ngStyle 不起作用的原因感兴趣。

Answer 1

我想你忘了在 scope.onResize 方法结束时调用 scope.$apply(); 来触发摘要循环

无论如何，我使用了以下对我有用的指令（取自 HERE）：

尝试打开调试视图并更改视图高度：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);   
 };

[编辑]

这里是使用innerHeight的没有jQuery库的演示

演示3Fiddle

Answer 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/

Answer 3

自从您询问以来已经有一段时间了，您似乎已经找到了解决方法...... 但你也问为什么ng-style 不起作用：

ng 风格，来自 Angular 文档

表达式，它评估一个对象，其键是 CSS 样式名称，值是这些 CSS 键的对应值。

因此，在您提供的 ng 样式示例中 height : 375; （也就是说，如果 windowHeight 评估为 375）并且这不是一个合适的值。

它应该就像你在你的解决方法中所做的那样并且有单位。

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

Answer 4

CoffeeScript 中的极简风格：

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

Same in Javascript.

Answer 5

内部链接函数给出

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


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

Answer 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