Creating a directive for window resizing - angularjs

Question

I have four mostly square looking charts which I need to resize on window resize. I have created a directive as below inside my angular controller at the top. This doesn't seem to work as the directive seem to executing as soon as the page loads and nothing seems to happen on resize. What am I missing here?
targetApp.directive('rsz', function ($window) {
return function (scope, element) {
var w = angular.element($window),
iw = w.innerWidth,
ih = w.innerHeight;
//resizing relative to the this parent container
scatterParentDimensions = getoffsetDimensions('#scatter-container'),
expectedWidth, expectedHeight;
console.log('rel w:', scatterParentDimensions.width, 'rel h:', scatterParentDimensions.height);
if (iw > ih) {
expectedWidth = scatterParentDimensions.width / 2;
expectedHeight = (scatterParentDimensions.height < iw)
? scatterParentDimensions.height / 2
: scatterParentDimensions.height / 4;
}
else {
expectedWidth = iw / 2;
expectedHeight = ih - 50;
}
// this is returning NaN as soon as the page is loaded.
console.log('set w:', expectedWidth, 'set h:', expectedHeight);
var selector = "#" + element.id;
if ($(selector).highcharts()) {
chart = $(selector).highcharts();
chart.setSize(expectedWidth, expectedHeight, false);
}
w.bind('resize', function () {
scope.$apply();
});
}
})
I have added the directive rsz on the four charts that need resizing.
//scatter.html
<div id="target-charts">
<div id="scatter-container" class="col-sm-8">
<div class="row">
<div class="col-sm-6">
<div class="scatter-chart">
<div class="chart-body" rsz id="scatterA"></div>
</div>
</div>
<div class="col-sm-6">
<div class="scatter-chart">
<div class="chart-body" rsz id="scatterB"></div>
</div>
</div>
<div class="col-sm-6">
<div class="scatter-chart">
<div class="chart-body" rsz id="scatterC"></div>
</div>
</div>
<div class="col-sm-6">
<div class="scatter-chart">
<div class="chart-body" rsz id="scatterD"></div>
</div>
</div>
</div>
</div>
</div>
Definition for getOffsetDimensions
function getoffsetDimensions(selector) {
var el = document.querySelector(selector);
return {
width: el.offsetWidth,
height: el.offsetHeight
}
}

Answer 1

in your directive, you listen to the resize event but didn't do anything (scope.$apply basically does nothing here).
you can either do the actually resizing inside of event handler, for example
myapp.directive('resize1', function($window) {
return function(scope, element, attr) {
var w = angular.element($window);
w.on('resize', function() {
var hh = document.getElementById('header').offsetHeight;
var fh = document.getElementById('footer').offsetHeight;
console.log('hh & fh', hh, fh);
var tp = hh + 2;
var bt = fh + 2;
console.log('tp & bt', tp, bt);
var changes = {
bottom: bt + 'px',
top: tp + 'px',
}
element.css(changes);
scope.$apply();
});
};
});
or watch the dimension changes, for example
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();
});
}
})

Answer 2

Eventually this is how I have made this work. It is still not the perfect solution and not at all generic, but I got it work for the initial stage of what I was looking for.
targetApp.directive('resize', 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) {
var ew, eh, scatterParentDimensions = getoffsetDimensions('#scatter-container');
if (newValue.w > newValue.h) {
ew = scatterParentDimensions.width / 2;
eh = (scatterParentDimensions.height < newValue.w)
? scatterParentDimensions.height / 2
: scatterParentDimensions.height / 4;
}
else {
ew = newValue.w / 2;
eh = newValue.h - 50;
}
//resize highcharts
var selector = '#' + element[0].id;
var chart = angular.element(selector).highcharts();
chart.setSize(ew, eh, false);
}, true);
w.bind('resize', function () {
scope.$apply();
});
}
});