Угловой $ rootScope $ на слушателях в «разрушенном» контроллере продолжает работать

Question

У меня есть мое угловое приложение, настроенное с директивой ng-view в index.html, с представлениями, настроенными с конфигурацией $ routeProvider, и каждый вид имеет свой собственный контроллер. В одном контроллере представления у меня есть $ rootScope. $ On listener, который следит за событиями. Я ожидаю, что этот слушатель больше не будет работать, когда я изменю представления, но это не так. Часы все еще продолжают вызывать код, когда он запускается, даже когда я переключился на представление, которое больше не использует этот контроллер.

Я установил некоторый тестовый код для прослушивания события $ destroy, и я вижу, что событие $ destroy запускается, но функция прослушивателя все еще работает. Я распечатал $ scope. $ Id как в функции часов, так и в прослушивателе событий $ destroy, и я вижу, что идентификаторы совпадают. Таким образом, кажется, что даже после того, как событие $ destroy встречается для конкретной области, слушатель $ on на нем все еще работает. Почему это так? У меня создалось впечатление, что при навигации к другому виду или в любом случае контроллер уничтожается, а затем слушатели для него очищаются.

Plnkr: http://plnkr.co/edit/TxssxQJY5PVLTAIAr4xD?p=preview

var animateApp = angular.module('animateApp', ['ngRoute', 'ngAnimate']); 

animateApp.config(function($routeProvider) { 
    $routeProvider 
     .when('/', { 
      templateUrl: 'page-home.html', 
      controller: 'mainController' 
     }) 
     .when('/about', { 
      templateUrl: 'page-about.html', 
      controller: 'aboutController' 
     }) 
     .when('/contact', { 
      templateUrl: 'page-contact.html', 
      controller: 'contactController' 
     }); 

}); 

angular.module('animateApp').service('service', ['$interval', '$rootScope', service]); 
function service ($interval, $rootScope) { 
    var service = {}; 
    service.abc = 1; 
     $interval(function() { 
     service.abc++; 
     $rootScope.$broadcast('service.abc', service.abc); 
    }, 500); 

    return service; 

} 


animateApp.controller('mainController', function($scope, $rootScope, service) { 
    $scope.pageClass = 'page-home'; 
    $scope.$on('$destroy', function iVeBeenDismissed() { 
         console.log('goodbye ' + $scope.$id); 
     // release resources, cancel request... 
    }) 

    $rootScope.$on('service.abc', function (newval) { 
     console.log($scope.$id); 
    }) 
}); 

animateApp.controller('aboutController', function($scope) { 
    $scope.pageClass = 'page-about'; 
}); 

animateApp.controller('contactController', function($scope) { 
    $scope.pageClass = 'page-contact'; 
}); 

Answer 1

Вы должны добавить слушатель $destroy событий в контроллерах:

scope.$on('$destroy', function() { 
     element.off('blur'); // example 
     element = null; 
    }); 

При этом вы будете вручную убедитесь, что там будут не более активными $ наблюдателей на неактивные контроллеры.

Answer 2

Итак, вопрос был полностью изменен, так что контекст был совершенно иным, поэтому мой предыдущий ответ больше не связан с вопросом, за исключением того, что он применяется совершенно так же.

Вы можете отменить регистрацию своего слушателя в том же отношении, что и мой ответ ниже.

$rootScope.$on() возвращает незарегистрированную функцию.

Таким образом, ваш mainController может быть переписан как:

animateApp.controller('mainController', function($scope, $rootScope, service) { 
    $scope.pageClass = 'page-home'; 
    var unregister = $rootScope.$on('service.abc', function (newval) { 
     console.log($scope.$id); 
    }); 
    $scope.$on('$destroy', function iVeBeenDismissed() { 
     unregister(); 
    }); 
}); 

Предыдущего ответ

Вы должны убедиться, что вы отвязать свои часы, когда объем вашего контроллера будет уничтожен.

При создании часов угловой возвращает функцию открепления для созданных вами часов. Это довольно хорошо покрыто here.

Создать ссылку на часы вы создаете:

var unbinder = $scope.$watch("foo.bar", doStuff); 

часы для уничтожения вашего прицела, как вы были, но назвать свой unbinder там.

$scope.$on("$destroy", function(){ 
    if(typeof unbinder === "function") 
     unbinder(); 
}); 

После того, как ваша unbinder функция вызывается, ваши часы будут удалены.