javascript - Call more than one callback on angular directive $destroy -

let's have directive uses external controller called mycontroller

(function() {     'use strict';      angular         .module('app')         .controller('mycontroller', mycontroller);      mycontroller.$inject = ['$rootscope'];     function mycontroller($rootscope) {         //my app code...         var clearroot1 = $rootscope.$on('event1', dosomething);         var clearroot2 = $rootscope.$on('event2', dosomethingelse);         var clearwatcher = $scope.$watch('model', updatesomething);          $scope.$on('$destroy', clearwatcher);         $scope.$on('$destroy', clearroot1);         $scope.$on('$destroy', clearroot2);     } })(); 

as see i'm creating multiple listeners , have listen $destroy event clear each 1 of listeners.

so have 2 questions 1 practical , 1 aesthetical.

practical question need call clearwatcher being watcher bound $scope of directive destroyed when directive element removed dom?

aesthetical question there nice way clear listeners 1 callback on $destroy event? $scope.$on('$destroy', ['clear1', 'clear2']);

practical question need call clearwatcher being watcher bound $scope of directive destroyed when directive element removed dom?

no, not need call watcher functions, angular cleanup when scope destroyed.

see link: angular.js $destroy event - should manually unbind?

note: although watchers unbound when scope destroyed, apply current scopes $destroy. have listeners on $rootscope here

    var clearroot1 = $rootscope.$on('event1', dosomething);     var clearroot2 = $rootscope.$on('event2', dosomethingelse); 

these not unbound, because destroying controllers $scope not call $destroy() on $rootscope. in case, given want listeners unbound when scope destroyed, need invoke watchers. brings me second question.

aesthetical question there nice way clear listeners 1 callback on $destroy event? $scope.$on('$destroy', ['clear1', 'clear2']);

not in fashion. listening '$destroy' via $scope.$on method same listening other event, see documentation $on

$on(name, listener); listens on events of given type. see $emit discussion of event life cycle.

the event listener function format is: function(event, args...). event object passed listener has following attributes:

targetscope - {scope}: scope on event $emit-ed or $broadcast-ed.

currentscope - {scope}: scope handling event. once event propagates through scope hierarchy, property set null.

name - {string}: name of event.

stoppropagation - {function=}: calling stoppropagation function cancel further event propagation (available events $emit-ed).

preventdefault - {function}: calling preventdefault sets defaultprevented flag true.

defaultprevented - {boolean}: true if preventdefault called.

you register single function destroy event, , invoke watchers called function. store them locally when they're registered, or invoke them immediately. example updated reflect first of these options.

(function() { 'use strict';   angular   .module('app')   .controller('mycontroller', mycontroller);    mycontroller.$inject = ['$rootscope'];   function mycontroller($rootscope) {      //my app code...      $scope.$on('$destroy', function() { cleanup(); });      function initialize() {       $scope.rootwatchers = [];        $scope.rootwatchers.push( $rootscope.$on('event1', dosomething) );       $scope.rootwatchers.push( $rootscope.$on('event2', dosomethingelse) );       $scope.$watch('model', updatesomething);     }      function cleanup() {       angular.foreach( $scope.rootwatchers, function(stopwatcher) { stopwatcher(); } );     }    }  })();