Feature: expose $animate promise to controller

[christopherthielen]

This is in relation to #1643

Prior to 0.2.16, a ui-view's $scope was destroyed just before the ui-view started to be animated out. This caused some problems for certain users, because they were relying on the $destroy event to clean up resources (the ticket in question was cleaning up highcharts). They requested that the destroy event be deferred until after the animation was completed.

We misinterpreted the information to mean that any bound variables were becoming unbound, and "garbling" the data on the page while the transition was in progress. This interpretation was incorrect, as this plunker shows: http://plnkr.co/edit/VI7tF1?p=preview (the scope is destroyed, and previously bound values remain in the DOM, while the ui-view is animated out).

This change in the timing of the $destroy for a ui-view's $scope caused issues for other users, who rely on the original timing and lifecycle, so that lifecycle event listeners are deregistered just before the ui-view is animated out.

We have discussed this issue internally, and I think we can revert to the 0.2.15 behavior of destroying the $scope before the ui-view animates out. We think that exposing the animation promise to a controller function will allow a hook for the "clean up resources on $destroy" crowd to do so after the animation is complete.

Something like <div ui-view on-destroy="vm.scheduleCleanup($event)"></div> and then

function ctrl() {
  this.scheduleCleanup = function(event) {
    event.promise.then(cleanup());
  }
  this.cleanup = functino() {
    //     clean up highcharts resources
  }
}

[christopherthielen]

released 0.3.0

[adrienlamotte]

Hi !
Could you explain a bit more how to solve that issue ? I have the exact same kind of issue, and had no luck with your demo code above...

Thank you :)