1.5 Feature: Backport ngOnDestroy (as $onDestroy for example) exactly as ngOnInit ($onInit)

[radek-anuszewski]

In new 1.5.0 release is possible to use $onInit hook which is similar to ngOnInit from Angular 2 lifecycle hooks. It will help with keeping controller's constructors clean, with initialization logic moved to the $onInit method.
I think worth consideration is backport also ngOnDestroy, as $onDestroy for example.

Use Case:

In recent project in my company on of the business rules is to send request to device every second (which we have done with timeouts). We try to stay away as possible from injecting $scope to controllers, but timeouts needs to be cleared when user opens new view or hits back button on mobile device etc... So we solved this with $scope.$on:

$scope.$on('$destroy', function () {
      viewModel.removeIntervals();
});

And it's only one direct usage of $scope at this moment. If we have $onDestroy hook, code would be like:

viewModel.$onDestroy =  function () {
      viewModel.removeIntervals();
});

And we can get rid off $scope injection completely. Also, it let us keep code closer to Angular 2 syntax.

Thank you in advance for looking on this post.

Best regards,
Radek.

[dcherman]

👏 , would love to have something like this.

[shlomiassaf]

We have a workaround for this, i'll share it.
We use it until it will be supported and it works quite well.

We register our first run block and request the $injector service.
We monkey patch the $injector.instantiate method and inside register the $onDestory event, if needed.

angular.module('app').run(['$injector', function($injector) {
    var $instantiate = $injector.instantiate;
    $injector.instantiate = function (Type, locals, serviceName) {
        var instance = $instantiate.call(this, Type, locals, serviceName);
        if (instance.$onDestroy && typeof instance.$onDestroy === 'function') && locals && locals.$scope) {
            locals.$scope.$on('$destroy', function() {instance.$onDestroy()});
        }
        return instance;
    }
}]);

This is a very simple example of the idea, I converted it real time from TypeScript and removed internal utils so I hope its correct.

Some notes:

Its important to note that it will not work on "child" injectors, i.e injectors created using angular.injector factory, to support it angular.injector should be monkey patched as well, returning a monkey patched version of the injector (using the code above) checking if it was patched, if not returning a patched version...

We never tried using a decorator for this, I'm not sure its even possible to get the $injector service from a decorator, but if its possible it might be better designed (but who cares...)

This is a very simple hack to support this feature until it lands.

[poshest]

Am I correct in saying that the this.$onDestroy only gets "converted" into a scope.$on('$destroy', ... at the time a component is linked? So if, in a component's code you did

$timeout(this.$onDestroy = function ...)

$onDestroy wouldn't actually fire upon component destruction, whereas this

$timeout($scope.$on('$destroy', function ...))

would get mean the $destroy function was called upon component destruction (assuming the destruction happened after the $timeout was processed).

[gkalpak]

@poshest that is correct (assuming you meant $timeout(function() { this.$onDestroy = ... })).
Basically, right after the controller is instantiated and the $onChanges()/$onInit()/$doCheck() hooks are triggered (if present), the controller instance is checked for $onDestroy() and sets up the scope.$on('$destroy', ...) listener if necessary.

[poshest]

Yes, that's what I meant! OK cool. Thanks again @gkalpak :)