窗口调整大小指令

我试图在窗口调整大小时调整 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 in scope.onResize，它似乎不适用于ngStyle

我是否仍然忽略了什么？

EDIT:

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

这个解决方案似乎有效，仍然对为什么使用感兴趣ngStyle没工作。

我认为您忘记通过调用来触发摘要循环scope.$apply();在......的最后scope.onResize method

Anyways, I used following directive (took from HERE https://stackoverflow.com/questions/14703517/angular-js-set-element-height-on-page-load) that works for me:

Try to open debug view and change view height: Demo Fiddle http://jsfiddle.net/zbjLh/270/

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

Demo 3Fiddle http://jsfiddle.net/zbjLh/506/