$ scope和$ rootscope变量的生命周期

Question

In angularjs, I see a lot of usages for $scope and $rootscope. I like to understand the life term of variables attached to $scope and $rootscope. Say, I have a.js/a.html and e.js/e.html.

a.js has $scope attached with variables say $scope.b, $scope.c, $scope.d for use in a.html. If I load another page with e.js and e.html. Those $scope.b, $scope.c, $scope.d still have lives or they are removed. If I have $scope.b, $scope.c, $scope.d again in e.js, what could be issue? I just want to highlight the life term of those attached variables.

Answer 1

1. $rootScope - Usually configured in your main app.js file where you define your angular main module and main configuration. Even if not configured, it can always be injected.
2. $scope - your current scope in the current controller (page).

---

1. $rootScope variables live as long as you dont refresh your page. That means that they exist trough all transitions of your SPA.
2. $scope variables live only on the current scope (again, as long as you dont refresh the page) and they will get disposed once you transition to a different controller/page.

Answer 2

$rootScope lives as long as the whole page does

$scope instances are destroyed whenever the controller or directive using it are no longer active

No javascript is persistent between full page loads in browser

Answer 3

$rootScope is global while $scope is local. When Controller is assigned to a page, so a $scope variable can be use here because it binds to this controller. But when we want to share its value across to other controllers or services, then $rootScope is being used (**there are alternative ways share values across but in this case we want to use $rootScope ).

AngularJS Scope Life-Cycle

A property assigned with $scope cannot be used outside the controller in which it is defined whereas a property assigned with $rootScope can be used anywhere.

Which means when you want variable witch can be use in single variable to use in multiple controller (whole application), you can use $rootscope

$rootScope exists, but it can be used for evil

Scopes in Angular form a hierarchy, prototypally inheriting from a root scope at the top of the tree. Usually this can be ignored, since most views have a controller, and therefore a scope, of their own.

Occasionally there are pieces of data that you want to make global to the whole app. For these, you can inject $rootScope and set values on it like any other scope. Since the scopes inherit from the root scope, these values will be available to the expressions attached to directives like ng-show just like values on your local $scope .

Of course, global state sucks and you should use $rootScope sparingly, like you would (hopefully) use with global variables in any language. In particular, don't use it for code, only data. If you're tempted to put a function on $rootScope , it's almost always better to put it in a service that can be injected where it's needed, and more easily tested.

Conversely, don't create a service whose only purpose in life is to store and return bits of data.

— AngularJS Docs Miscellaneous - FAQ