scope.$destroy not triggered on page redirect

Question

I have a large AngularJS application with many directives, some of these are encapsulated activeX controls.

A problem we're running into is if the user logs out while viewing an activeX control, the activeX control stays on the page, even though we navigate to a completely new .html page.

We always clean up our directive resources in the scope.$on("$destroy" event, and I was hoping I could do that here: just ensuring that the object tag is removed from the page on destroy.

The problem I find is that no matter which directive I use as a reference, the $destroy event is not being called when $window.location.assign is used to redirect to a new page.

I also tested with $window.location.href and I get the same result, no $destroys being hit.

Is there a way to ensure scope.$destroy is triggered on page redirect?

Answer 1

$destroy is not triggered automatically when leaving the app, only when changing pages within the app. You do have a couple options, though.

Option 1:

It sounds like you're manually triggering the leave with $window.location.assign, so you could write a function that does both for you:

function destroyAndAssign(path){
  $rootScope.$destroy(); 
  $timeout(function(){
    $window.location.assign(path);
  });
}

And expose that to the places that need it through a service/provider to call.

Option 2:

Otherwise, if you want to attempt to force a $destroy every time that the app is left, you can try configuring a window.onbeforeunload event when building the app:

theApp.run(['$rootScope', function($rootScope){
  var oldOnLeaveEvent = window.onbeforeunload;

  window.onbeforeunload = function(){
    $rootScope.$destroy();
    if(angular.isFunction(oldOnLeaveEvent)){
      oldOnLeaveEvent.apply(window, arguments);
    }
  };
}]);

However, various things won't be possible at onbeforeunload time.