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

Question

我是AngularJS新手。我想创建网格（使用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(); 
    }; 
}); 

这种运作良好，当我调整浏览器窗口，但如果网站加载首次不适用的风格。我可以在哪里放置代码来提升高度？

Answer 1

我碰到您的文章之际，我一直在寻找一个解决同样的问题我自己。我使用基于许多帖子的指令将以下解决方案放在一起。您可以尝试在这里（尝试调整浏览器窗口）：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(); 
     }); 
    } 
}) 

FYI我原本是在控制器（http://jsfiddle.net/zbjLh/）工作，但从后来的阅读中发现，从Angular的角度来看这并不酷，所以我现在已经将它转换为使用指令。

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

Answer 2

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

这也确保所有的脚本在执行语句之前已经被加载。如果你不需要，你可以用

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

Answer 3

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

的示波器或数据被加载即$范围后它基本上给你运行你的指令代码的功能$ whenReady

Answer 4

结合matty-j建议在问题的片段中，我最终提出了这个代码，重点放在数据加载后调整网格大小。

的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', 
     ... 
    }; 
} 

Answer 5

我的解决办法，如果你的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是我的标题股利固定高度，可以修复其他的高度。

这很容易指令，但它工作正常。

Answer 6

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

Answer 7

为了避免检查每个摘要循环，我们可以在窗口高度发生变化时更改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   
    } 
}) 

Answer 8

对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