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