Angular 1.5 Components Difference Between $ondestroy & $scope.$destroy()

I'm trying to understand the difference between the controller's $onDestroy method and $scope.$destroy(). Definition says that $onDestroy is called when the containing scope of th

Solution 1:

Take a look at the following links: https://github.com/angular/angular.js/issues/15073https://github.com/angular/angular.js/issues/14376

To summarize, the explanation they give is the following:

There is a misconception that controller.$onDestroy() is equivalent to $scope.$on('$destroy'), where $scope is the scope passed to the controller. This is not always the case.

More specifically, controller.$onDestroy() is called when the scope where the controller "lives in" gets destroyed. When you have an isolate scope directive, the scope passed (as $scope) to the controller is not the scope that the controller lives in, it is a child-scope that is created for the directive's template. Thus, calling $scope.$destroy() will NOT destroy the scope that the controller lives in (and NOT call controller.$onDestroy()).

The only case, where controller.$onDestroy() is equivalent to $scope.$on('$destroy') is when having a directive with scope: false. This means that no new scope is created, so the scope passed (as $scope) to the controller is the same scope that the controller lives in.

This explains the second situation, but I still don't get why you can call the function associated with the 'Component FUNC' button even after you have called $destroy().

I hope this helps.