Javascript Angular.js：在页面加载时设置元素高度

我是AngularJS的新手。我想创建网格（使用），其高度取决于窗口高度，即：

$（'.gridStyle'）.height（$（window.height（）-100）

我已书面指示：

app.directive('resize', function($window) {

    return function(scope, element) {

        function applyHeight() {
            scope.height = $window.innerHeight;
            $('.gridStyle').height(scope.height - 100);
        }

        angular.element($window).bind('resize', function() {
            scope.$apply(function() {
                applyHeight();
            });
        });

        applyHeight();
    };
});

angular.module('myApp.directives', [])
    .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) {

                // resize Grid to optimize height
                $('.gridStyle').height(newValue.h - 250);
            }, true);

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

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

当我调整浏览器窗口的大小时，这种方法效果很好，但当第一次加载站点时，不会应用样式。在哪里可以放置代码来初始化高度

$(document).ready(function() {
       scope.$apply(function() {
                applyHeight();
            });
});

这还确保在执行语句之前加载了所有脚本。如果你不需要，你可以用

$(window).load(function() {
       scope.$apply(function() {
                applyHeight();
            });
});

我在为自己寻找解决同样问题的方法时，偶然发现了你的帖子。我使用基于多篇文章的指令组合了以下解决方案。您可以在此处尝试（尝试调整浏览器窗口的大小）：

视图：

仅供参考，我最初让它在控制器（）中工作，但从后续阅读中发现，从Angular的角度来看，这是不酷的，所以我现在将其转换为使用指令

重要的是，请注意“watch”函数末尾的
true
标志，用于比较getWindowDimensions返回对象的相等性（如果不使用对象，请删除或更改为false）。
您似乎需要以下插件：

它基本上为您提供了在加载范围或数据后运行指令代码的功能，即$scope。$whenrady
将建议与问题片段结合起来，我最后用这段代码重点介绍了在加载数据后调整网格的大小

HTML：

<div ng-grid="gridOptions" class="gridStyle"></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();
        });
    }
})

angular.module('myApp').controller('Admin/SurveyCtrl', function ($scope, $routeParams, $location, $window, $timeout, Survey) {

    // Retrieve data from the server
    $scope.surveys = Survey.query(function(data) {

        // Trigger resize event informing elements to resize according to the height of the window.
        $timeout(function () {
            angular.element($window).resize();
        }, 0)
    });

    // Configure ng-grid.
    $scope.gridOptions = {
        data: 'surveys',
        ...
    };
}

如果ng网格依赖于元素父元素（div，layout），我的解决方案是：

指示

myapp.directive('sizeelement', function ($window) {
return{
    scope:true,
    priority: 0,
    link: function (scope, element) {
        scope.$watch(function(){return $(element).height(); }, function(newValue, oldValue) {
            scope.height=$(element).height();
        });
    }}
})

示例html

<div class="portlet  box grey" style="height: 100%" sizeelement>
    <div class="portlet-title">
        <h4><i class="icon-list"></i>Articles</h4>
    </div>
    <div class="portlet-body" style="height:{{height-34}}px">
        <div class="gridStyle" ng-grid="gridOrderLine" ="min-height: 250px;"></div>
    </div>
</div>


文章

height-34:34是我的标题div的固定高度，您可以固定其他高度

这是一个简单的指令，但工作正常。
为了避免检查每个摘要周期，我们可以在更改窗口高度时更改div的高度

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


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

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

编辑
在现代浏览器中，这实际上是一种愚蠢的方式。CSS3具有calc，允许在CSS中指定计算，如下所示：

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

尝试在指令底部添加$timeout、$timeout（applyHeight）

更改样式，但不幸的是网格没有刷新仅供参考，如果应用程序不是很小，将

$apply

绑定到

'resize'

事件是一个糟糕的主意。为了补充@freshyeball info，调整窗口大小时，

每秒可触发20-50次以上。小心使用。这两种解决方案都没有效果（.gridStyle高度在Chrome开发工具中不会改变）。使用函数不是很糟糕吗？据我所知，
scope.getWindowDimensions（）
将在每个
$digest
周期调用，即使窗口未调整大小。据我所知，为了一次查看多个值（即窗口的“宽度”和“高度”），您需要查看一个函数（因此需要有“监视函数”标志）（最后一个参数）设置为“true”）。如果你只想观察一个维度或一个值，你不需要函数。你可以。@n1313观察是完全正常的functions@MattyJ您可以动态查看“{a:b，c:d}”表达式，还有$watchGroup出现在angular 1.3中，您在哪里添加了resize
指令
？
 <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();
    }
}]);

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