Angular.js：在页面加载时设置元素高度
我是AngularJS新手。 我想要创build网格（使用ng-grid ），其高度取决于窗口高度即。 $('.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(); }; });
当我调整浏览器窗口的大小时，这种方式效果很好，但是在第一次加载网站时，风格不适用。 我在哪里可以把代码初始化高度？
我遇到了你的文章，因为我正在为自己寻找一个解决同样的问题。 我使用基于多个post的指令将以下解决scheme放在一起。 你可以在这里尝试（尝试调整浏览器窗口）： 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的angular度来看，这是不冷的，所以我现在已经转换为使用指令。
重要的是，请注意“watch”函数末尾的true标志，用于比较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的优秀答案略有改善。 支持元素上的宽度偏移和/或高度偏移，以确定从宽度/高度中减去多less，并防止负向尺寸。
<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); }
看来你需要下面的插件： https ： //github.com/yearofmoo/AngularJS-Scope.onReady
它基本上为您提供了在您的作用域或数据加载后运行您的指令代码的function，例如$ scope。$ whenReady
结合Matty-j的build议和问题的片段，我结束了这个代码重点放在数据加载后的网格大小。
HTML：
<div ng-grid="gridOptions" class="gridStyle"></div>
指令：
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(); }); } });
控制器：
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', ... }; }
我的解决scheme，如果你的NG网格取决于元素父（div，布局）：
指示
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>
高度34：34是我的标题div的固定高度，你可以修复其他高度。
这是容易的指令，但它工作正常。
$(document).ready(function() { scope.$apply(function() { applyHeight(); }); });
这也确保所有脚本在语句执行之前已经被加载。 如果你不需要，你可以使用
$(window).load(function() { scope.$apply(function() { applyHeight(); }); });
