我在为自己寻找解决同一问题的方法时看到了您的帖子。我使用基于许多帖子的指令将以下解决方案放在一起。您可以在这里尝试（尝试调整浏览器窗口的大小）：http : //jsfiddle.net/zbjLh/2/

看法：

<div ng-app="miniapp" ng-controller="AppController" ng-style="style()" resize>
    window.height: {{windowHeight}} <br />
    window.width: {{windowWidth}} <br />
</div>

控制器：

var app = angular.module('miniapp', []);

function AppController($scope) {
    /* Logic goes here */
}

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

            scope.style = function () {
                return { 
                    'height': (newValue.h - 100) + 'px',
                    'width': (newValue.w - 100) + 'px' 
                };
            };

        }, true);

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

仅供参考，我最初让它在控制器（http://jsfiddle.net/zbjLh/）中工作，但从随后的阅读中发现，从 Angular 的角度来看，这并不酷，所以我现在已将其转换为使用指令。

重要的是，请注意true'watch' 函数末尾的标志，用于比较 getWindowDimensions 返回对象的相等性（如果不使用对象，则删除或更改为 false）。

为了避免检查每个摘要周期，我们可以在窗口高度改变时改变 div 的高度。

http://jsfiddle.net/zbjLh/709/

<div ng-app="miniapp" resize>
  Testing
</div>

.

var app = angular.module('miniapp', []);

app.directive('resize', function ($window) {
    return function (scope, element) {
        var w = angular.element($window);
        var changeHeight = function() {element.css('height', (w.height() -20) + 'px' );};  
            w.bind('resize', function () {        
              changeHeight();   // when window size gets changed             
        });  
        changeHeight(); // when page loads          
    }
})

angular.element(document).ready(function () {
    //your logic here
});

对 Bizzard 的出色回答略有改进。支持元素上的宽度偏移和/或高度偏移，以确定将从宽度/高度中减去多少，并防止负尺寸。

 <div resize height-offset="260" width-offset="100">

指示：

app.directive('resize', ['$window', function ($window) {
    return function (scope, element) {
        var w = angular.element($window);
        var heightOffset = parseInt(element.attr('height-offset'));
        var widthOffset = parseInt(element.attr('width-offset'));
        var changeHeight = function () {
            if (!isNaN(heightOffset) && w.height() - heightOffset > 0)
                element.css('height', (w.height() - heightOffset) + 'px');
            if (!isNaN(widthOffset) && w.width() - widthOffset > 0)
                element.css('width', (w.width() - widthOffset) + 'px');
        };
        w.bind('resize', function () {
            changeHeight();
        });
        changeHeight();
    }
}]);

编辑 这在现代浏览器中实际上是一种愚蠢的做法。CSS3 有 calc，它允许在 CSS 中指定计算，像这样：

#myDiv {
 width: calc(100% - 200px);
 height: calc(100% - 120px);
}

http://caniuse.com/#search=calc

看来您需要以下插件：https : //github.com/yearofmoo/AngularJS-Scope.onReady

它基本上为您提供了在加载范围或数据后运行指令代码的功能，即 $scope.$whenReady