Window resize指令

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

虽然我可以登录elem.windowHeight的scope.onResize,它似乎并没有将它应用到ngStyle

我还在忽视什么吗？

编辑:

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

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

Answer 1

我想你忘记了通过scope.$apply();在scope.onResize方法结束时调用来消化摘要周期

无论如何,我使用HERE了适用于我的以下指令(取自):

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

[编辑]

这里是使用没有jQuery库的demo innerHeight

演示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-style,来自Angular文档

对于其键是CSS样式名称和值的对象的表达是这些CSS键的对应值.

所以在您提供的ng风格示例中 height : 375; (即windowHeight评估为375)并且这不是正确的值.

它应该像你在你的解决方法中完成并拥有单位.

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