Window resize directive

Question

I was trying to make a div resize when the window resizes, after looking around, it seems that using a directive was the best solution.

Template:

<div elHeightResize ng-view ng-style="{ height: windowHeight }"></div> 

Directive:

myApp.directive('elheightresize', ['$window', function($window) {     return {         link: function(scope, elem, attrs) {             scope.onResize = function() {                 var header = document.getElementsByTagName('header')[0];                 elem.windowHeight = $window.innerHeight - header.clientHeight;             }             scope.onResize();              angular.element($window).bind('resize', function() {                 scope.onResize();             })         }     } }]) 

While I can log elem.windowHeight in scope.onResize, it doesn't seem to apply it to ngStyle

Am I still overlooking something?

EDIT:

<div ng-view resize style="height: {{ windowHeight }}px">

This solution seems to work, still interested into why using ngStyle wasn't working.

Answer 1

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

Answer 2

Since we work with a directive, we can always do some DOM manipulation by changing the height of the element inside the directive.

Example:

var app=angular.module('App', []); app.directive('elheightresize', ['$window', function($window) {     return {         link: function(scope, elem, attrs) {             scope.onResize = function() {                 var header = document.getElementsByTagName('header')[0];                 elem.windowHeight = $window.innerHeight - header.clientHeight;                 $(elem).height(elem.windowHeight);             }             scope.onResize();              angular.element($window).bind('resize', function() {                 scope.onResize();             })         }     } }]) 

Live example: http://jsfiddle.net/choroshin/FJvyb/