Pankaj Parkar Pankaj Parkar - 4 months ago 35
Javascript Question

How to put listen over $destroy while using controllerAs syntax in angular

Now I'm getting rid of

$scope
dependency from my angular controller to ensuring that I could easily migrate my code to Angular2. My current angular version is
1.4.X
.
While doing the same thing there is place while I placed
$destroy
listener over my controller scope like
$scope.$on('$destory', function() ....)
.

I can see
$on
method only available on
$scope
of controller, but how can I achieve it without using
$scope
dependency.

Answer

If you are using angular 1.5+ they added lifecycle hooks that you can opt into on your controller. No $scope needed. Just add a function called $onDestroy() to your controller and it will be called when your controller is being clean up:

$onDestroy() - Called on a controller when its containing scope is destroyed. Use this hook for releasing external resources, watches and event handlers.

Example from http://blog.thoughtram.io/angularjs/2016/03/29/exploring-angular-1.5-lifecycle-hooks.html:

function MyCmpController($element) {

  var clickHandler = function () {
    // do something
  };

  this.$onInit = function () {
    $element.on('click', clickHandler);
  };

  this.$onDestroy = function () {
    $element.off('click', clickHandler);
  };
}