I'm AngularJS newbie. I want to create grid (using ng-grid) which height depends on window height ie. $('.gridStyle').height($(window).height() - 100);
I have written directive:
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();
};
});
This works well when I resize browser window but style is not applied when site is loaded for the first time. Where can I put code to initalize height?
This question is related to
javascript
angularjs
angular.element(document).ready(function () {
//your logic here
});
Combining matty-j suggestion with the snippet of the question, I ended up with this code focusing on resizing the grid after the data was loaded.
The HTML:
<div ng-grid="gridOptions" class="gridStyle"></div>
The directive:
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();
});
}
});
The controller:
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',
...
};
}
To avoid check on every digest cycle, we can change the height of the div when the window height gets changed.
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
}
})
A slight improvement to Bizzard's excellent answer. Supports width-offset and/or height-offset on the element, to determine how much will be subtracted from the width/height, and prevents negative dimensions.
<div resize height-offset="260" width-offset="100">
directive:
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();
}
}]);
Edit This is actually a silly way of doing it in modern browsers. CSS3 has calc, which allows the calculation to be specified in CSS, like this:
#myDiv {
width: calc(100% - 200px);
height: calc(100% - 120px);
}
My solution if your ng-grid depend of element parent(div, layout) :
directive
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();
});
}}
})
sample 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 is fix height of my title div, you can fix other height.
It is easy directive but it work fine.
$(document).ready(function() {
scope.$apply(function() {
applyHeight();
});
});
This also ensures that all the scripts have been loaded before the execution of the statements. If you dont need that you can use
$(window).load(function() {
scope.$apply(function() {
applyHeight();
});
});
It seems you require the following plugin: https://github.com/yearofmoo/AngularJS-Scope.onReady
It basically gives you the functionality to run your directive code after the your scope or data is loaded i.e. $scope.$whenReady
Source: Stackoverflow.com