Window resize event in AngularJS

Question

I have been googling for a while and so far I found how to resize window with window resize directive but in my code I'm using window.innerHeight to get initial height. I can use it any time except I need an event to when it changes. JavaScript window resize event does not fire for me for some reason. Here is my code inside of the controller:

function adjustH() {
    var bodyElem = document.getElementsByTagName('body')[0];
    var topP = window.getComputedStyle(bodyElem, null).getPropertyValue('padding-top');
    topP = topP.substring(0, topP.indexOf("px"));
    var bottomP = window.getComputedStyle(bodyElem, null).getPropertyValue('padding-bottom');
    bottomP = bottomP.substring(0, bottomP.indexOf("px"));
    vm.h = window.innerHeight - topP - bottomP - 20;
}

window.onresize = function(event) {
    adjustH();
}

Can anybody tell me if it is impossible to do it this way and I have to go the directive route? Or if its possible please tell me what I'm missing.

Answer 1

If you are working with angularJS, did you pass $window as a dependency to you controller.

I have had similar issues with this before and it was because the depoendency was not set. Hope this helps.

Answer 2

After reading your comment which stated

Also my canvas set to height="{{vm.h}}" but it only resizes when I mouse over

It seems that you need to call $scope.$apply() (or $rootScope.$apply() ) in order to update the height property of the element.

If you add more code from your directive/controller, I could give you a more detailed answer.