AngularJS doesn't remove $scope.$on when destroying $scope

Question

I have a simple app built with AngularJS:

var App = angular.module('myApp', [], function($window) {
  // settings..
}).run(function($rootScope){
   $(window).on('resize', function(event) {
        $rootScope.$broadcast('windowResize',{
            height: event.target.innerHeight,
            width: event.target.innerWidth
        });
    });
});

I have a directive, panel, with the following controller:

function($scope, $element) {    
    var
        $title = $element.find('.panel-title'),
        $content = $element.find('.panel-content'),
        margin = 20
    ;
    $content
        .height($(window).height() - $title.height() - margin);

    $scope.$on('windowResize', function(obj) {
        var height = obj.height - $title.height()  - margin;
        $content.height(height);
    });
}

All works perfectly the first time. When the controller changes, however, I get problems like TypeError: Cannot read property '$$childHead' of null, but I can get the error.

The problem is with $scope.$on. How can I remove this before destroying the $scope (when the controller changes)?

Not sure how you are "changing the controller", but $destroy event may be useful. — Tosh
– Tosh, Commented Feb 7, 2013 at 23:31
i have a $routeProvider each route has a controller when i say change controller is 'cos change the route — rkmax
– rkmax, Commented Feb 8, 2013 at 5:15

subhaze · Accepted Answer · 2014-06-01 15:13:56Z

2

The $on function returns a deregister function. So you can store that function in a variable and then call the function when you need to deregister the event.

var deregisterWindowResize = $scope.$on('windowResize', function callback(args){...});

$scope.$on('$destory', deregisterWindowResize);

More info here

You could make a function/service if you need to use this often, something like the following would work.

function weakBind(scope, eventName, callback){
    var deregister = scope.$on(eventName, callback);
    scope.$on('$destroy', deregister);
    return deregister;
}

weakBind($scope, 'windowResize', function(obj) {
    var height = obj.height - $title.height()  - margin;
    $content.height(height);
});

edited Jun 1, 2014 at 15:13

answered Jun 1, 2014 at 15:05

subhaze

8,8352 gold badges33 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Derek 朕會功夫 · Accepted Answer · 2014-12-31 08:11:07Z

1

You could try hook the $destroy event, and then use .$off

for example:

var onWindowResize = function(obj) {
    var height = obj.height - $title.height()  - margin;
    $content.height(height);
});

$scope.$on('windowResize', onWindowResize);
$scope.$on('$destroy', function(){
    $scope.off('windowResize', onWindowResize);
});

edited Dec 31, 2014 at 8:11

Derek 朕會功夫

94.8k45 gold badges199 silver badges255 bronze badges

answered Jul 18, 2013 at 21:11

Orion Edwards

125k67 gold badges248 silver badges341 bronze badges

Collectives™ on Stack Overflow

AngularJS doesn't remove $scope.$on when destroying $scope

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related