0

I have a piece of code running in (Angularjs v1.3.20, JQuery 1.11.1) which binds the resize event to a scaling function like so

angular.element(window).resize(function() {
    scaleContent();
});

However, after leaving the page that uses this code, the next page uses this bind and it's causing all sorts of problems scaling that page.

My vectors thus far include:

angular.element(window).on('resize', scaleContent);

with

$scope.$on('$destroy', function() {
    angular.element(window).off('resize', scaleContent)
});

To no avail. I've also tried bind/unbind, and various permutations of bind/unbind/on/off and passing scaleContent as a function reference/call. The best results I've had so far use bind/unbind, but that is deprecated and I wish to use on/off if possible.

I'm looking for a reliable way to remove this window resize binding upon destroy of the page.

Edit With Solution: There were a number of problems that I solved. First I had originally mistakenly had

$scope.$on('destroy',...);

which I have replaced by

$scope.$on('$destroy',...);

I then moved the whole on destroy portion outside of the init function of the controller (which I hadn't thought important enough to mention) and moved the on call past a timeout call of the scalecontent function. These were all things which I hadn't thought too important but it is now (actually) working.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.