Window resize directive

I think you forgot to fire digest cycle by calling scope.$apply(); at the end of scope.onResize method

Anyways, I used following directive (took from HERE) that works for me:

Try to open debug view and change view height: Demo Fiddle

app.directive('resize', function ($window) {
    return function (scope, element, attr) {

        var w = angular.element($window);
        scope.$watch(function () {
            return {
                'h': w.height(), 
                'w': w.width()
            };
        }, function (newValue, oldValue) {
            scope.windowHeight = newValue.h;
            scope.windowWidth = newValue.w;

            scope.resizeWithOffset = function (offsetH) {

                scope.$eval(attr.notifier);

                return { 
                    'height': (newValue.h - offsetH) + 'px'
                    //,'width': (newValue.w - 100) + 'px' 
                };
            };

        }, true);

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

And usage:

 <div  ng-style="resizeWithOffset(165)" 
       resize 
        notifier="notifyServiceOnChage(params)"
   >
    /** ... */
 </div>

Dummy controller method usage:

$scope.notifyServiceOnChage = function(){
      console.log($scope.windowHeight);   
 };

[EDIT]

Here is demo without jQuery library by using innerHeight

Demo 3Fiddle

Leave a Comment