angular- Dynamic window height with ng-style


Recently, I was working on one nw.js (Node-webkit) related project for creating windows / desktop application using node/nw.js. I had to write window resize event and based on that I needed to show vertical scrollbar.

in short something like – where height and scrollbar will adapt window resize automatically upon resize.

image

angular code

app.directive(‘winResize’, function ($window) {
    return function (scope, element, attr) {

        var w = angular.element($window);
        scope.$watch(function () {
            return {
                ‘h’: window.innerHeight,
                ‘w’: window.innerWidth
            };
        }, function (newValue, oldValue) {
            console.log(newValue, oldValue);
            scope.windowHeight = newValue.h;
            scope.windowWidth = newValue.w;

            scope.resizeWithOffset = function (offsetH) {
                scope.$eval(attr.notifier);
                return {
                    ‘height’: (newValue.h – offsetH) + ‘px’                   
                };
            };

        }, true);

        w.bind(‘resize’, function () {
            scope.$apply();
        });
    }
});

HTML code

{{content}}

window.height: {{windowHeight}}

window.width: {{windowWidth}}

Hope this helps someone in need…!! Happy Coding Smile

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s