Discussion:
[AngularJS] De-Registering an event listener on $scope $destory prevents subseqent listeners for same event from being re-attached
Joshua Barker
2014-11-12 20:56:57 UTC
Permalink
I am working on integrating Google maps into our Angular website.

I am attempting to use $rootScope.$emit() and $rootScope.$on() to broadcast
whenever a new search is performed and the map has to be reset / recreated.

The $emit("NewSearchSuccess") is triggered within our search form
controller on a successful $http POST. The $on("NewSearchSuccesss") is
handled within the page controller containing the map.

This works fine in general, but I recently tried adding some clean-up code
based on some stuff I read about using the $destroy event to prevent memory
leaks by de-registering listeners and cancelling timeouts.

However, when I use the de-registration callback function returned by $on()
during the $destory event, and then on a subsequent page view attempt to
re-add the same event listener, the listener is never called after the
corresponding $emit() message is broadcast. Removing the call to the
de-registration function fixes this.

Is this a bug? I assumed that de-registering and then re-registering an
event listener was the correct way to handle this type of cleanup (simlar
to $timeout.cancel), but ultimately it does not seem to work. Here is some
example code:

*SearchController.js*
$scope.Search = function ()
{
return searchService.GetListings().then(function (response)
{
$rootScope.$emit(siteConfig.events.NewSearchSuccess);

//... other code omitted for brevity ...
});
};

*GalleryController.js*
var _detachNewSearchSuccessListener = $rootScope.$on(siteConfig.events.NewSearchSuccess,
function()
{
googleMapService.deleteMapContext($scope.PageContext);
});

$scope.$on("$destroy", function ()
{
$timeout.cancel(_timeout);
//_detachNewSearchSuccessListener(); //<-- including this causes the
listener above to not work the next time the GalleryController is loaded...
});

Does anyone have any ideas why this is not working or how I should be
handling this properly?

Thanks!

Josh
--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+***@googlegroups.com.
To post to this group, send email to ***@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
Sander Elias
2014-11-13 05:51:44 UTC
Permalink
Hi Josh,

Are you sure it's the angular part that is acting up? Can you reproduce
this in a plunker <http://plnkr.co/edit/tpl:tNiT19vkRgkD51xEjrdb?p=preview>?
the plunk doesn't need to google maps stuff, just a sample
of registering/deregistering that does the same thing you are describing.
I'm not convinced that this is an angular problem (yet)

Regards
Sander
--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+***@googlegroups.com.
To post to this group, send email to ***@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
Loading...