Is the UI-Router an area that is not destroyed when a state changes?

Question

I am a new user of AngularJS and ui-router, and I am trying to expand my head on how to manage the area. I expected that the volume of the active controller will be destroyed when it becomes inactive when the state changes, however, it does not seem to be so.

I changed the example from the UI-Router website to illustrate the situation (see below plunker). Each time the route1.list / route2.list state is triggered, it throws an event on $ rootScope. When an event is received, a debug instruction will be displayed in the console.

When switching between the two states several times it is observed that all initialized controllers previously responded to the event. Thus, it seems that the areas they created were never destroyed. Is this behavior expected? If so, what should I do so that only active controllers respond to the event?

Plunker

Debug message printed on console:

the code:

var myapp = angular.module('myapp', ["ui.router"]) myapp.config(function($stateProvider, $urlRouterProvider){ // For any unmatched url, send to /route1 $urlRouterProvider.otherwise("/route1") 

here is the route1

 $stateProvider .state('route1', { url: "/route1", templateUrl: "route1.html" }) .state('route1.list', { url: "/list", templateUrl: "route1.list.html", controller: function($rootScope, $scope){ $rootScope.$emit("eventCT1"); $rootScope.$on("eventCT2", fn); function fn () { console.log("Controller 1 receives an event emitted by Controller 2"); } $scope.items = ["A", "List", "Of", "Items"]; } }) 

and here is route 2

  .state('route2', { url: "/route2", templateUrl: "route2.html" }) .state('route2.list', { url: "/list", templateUrl: "route2.list.html", controller: function($rootScope, $scope){ $rootScope.$emit("eventCT2"); $rootScope.$on("eventCT1", fn); function fn () { console.log("Controller 2 receives an event emitted by Controller 1"); } $scope.things = ["A", "Set", "Of", "Things"]; } }) ... 

Answer 1

If we want to do something with

1) $rootScope inside the controller (which has a very limited lifetime),

2), we must destroy this when the controller (its $scope actually) is destroyed

So, here's how to intercept and unhook

 // get remove function var removeMe = $rootScope.$on("eventCT2", ...); // call that function $scope.$on("$destroy", removeMe) 

But in the above case, we should not even try

1) create some controller action for one state ...

2) and expect that it will be called in another controller from another state

They will never live together

Answer 2

If you use Ionic with Angular, you can use life cycle events as follows:

 $scope.$on("$ionicView.beforeEnter", function(){ //Do something every time this controller is the active scope. }) 

You can play with other events specified in the link above. And probably best practice is to minimize the use of $emit , which will lead to more predictable code and fewer state mutations.