Angular.js: set element height on page load

Question

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?

try with $timeout , $timeout(applyHeight) at the bottom of your directive. — mpm
– mpm, Commented Feb 5, 2013 at 9:15
$timeout(applyHeight) change style but unfortunately grid is not refreshed — kolar
– kolar, Commented Feb 5, 2013 at 9:54
Just FYI, binding $apply to a 'resize' event is a terrible idea if you application isn't tiny. — Fresheyeball
– Fresheyeball, Commented Nov 4, 2013 at 17:03
To complement @Fresheyeball info, resize can be triggered over 20-50 times per second when resizing a window. Use with care. — Julien Bérubé
– Julien Bérubé, Commented Nov 28, 2013 at 4:06

Matty J · Accepted Answer · 2015-07-17 03:34:52Z

82

I came across your post as I was looking for a solution to the same problem for myself. I put together the following solution using a directive based on a number of posts. You can try it here (try resizing the browser window): http://jsfiddle.net/zbjLh/2/

View:

<div ng-app="miniapp" ng-controller="AppController" ng-style="style()" resize>
    window.height: {{windowHeight}} <br />
    window.width: {{windowWidth}} <br />
</div>

Controller:

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 I originally had it working in a controller (http://jsfiddle.net/zbjLh/), but from subsequent reading found that this is uncool from Angular's perspective, so I have now converted it to use a directive.

Importantly, note the true flag at the end of the 'watch' function, for comparing the getWindowDimensions return object's equality (remove or change to false if not using an object).

edited Jul 17, 2015 at 3:34

answered Mar 3, 2013 at 1:46

Matty J

3,17635 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

n1313 Over a year ago

Isn't that bad that you are $watching a function? As far as I understand, scope.getWindowDimensions() will be called on every $digest cycle, even if window was not resized.

Matty J Over a year ago

As I understand it, in order to watch more than one value at a time (ie. both the window's 'width' and 'height'), you need to watch a function (and thus need to have the watch function flag (last parameter) set to 'true')). If you wanted to just watch one dimension, or one value, you don't need a function.

Jürgen Paul Over a year ago

You could shorten further the code into like this.

psp Over a year ago

@n1313 its perfectly normal to watch functions

psp Over a year ago

@MattyJ you could watch "{a:b, c: d}" expression made on the fly and theres also $watchGroup coming in angular 1.3

Razan Paul · Accepted Answer · 2015-03-25 04:35:51Z

9

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          
    }
})

edited Mar 25, 2015 at 4:35

answered Mar 25, 2015 at 4:03

Razan Paul

13.9k3 gold badges74 silver badges61 bronze badges

Comments

Engineer · Accepted Answer · 2013-10-02 18:45:00Z

5

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

answered Oct 2, 2013 at 18:45

Engineer

8,9387 gold badges70 silver badges115 bronze badges

Comments

Tony BenBrahim · Accepted Answer · 2016-02-22 00:36:16Z

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

http://caniuse.com/#search=calc

Hardik Varia · Accepted Answer · 2013-03-10 14:57:04Z

0

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

answered Mar 10, 2013 at 14:57

Hardik Varia

11 bronze badge

Comments

Community · Accepted Answer · 2017-05-23 12:34:18Z

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

2 revs, 2 users 86% · Accepted Answer · 2014-11-05 04:57:48Z

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.

Yash Singla · Accepted Answer · 2013-02-05 09:23:39Z

-4

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

edited Feb 5, 2013 at 9:23

answered Feb 5, 2013 at 9:17

Yash Singla

1447 bronze badges

1 Comment

kolar Over a year ago

Both solutions have no effect (.gridStyle height doesn't change in Chrome Dev Tools).

Collectives™ on Stack Overflow

Angular.js: set element height on page load

8 Answers 8

5 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

5 Comments

Comments

Comments

Comments

Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related