Angular JS series – Understanding Scopes – Scope creation and inheritance

Angular JS series – Understanding Scopes – Scope creation and inheritance

Angular JS series – Understanding Scopes – Scope creation and inheritance

 

Prototypal inheritance

In most programming languages, there are classes and objects. Classes inherit from classes. JavaScript is a class-free, object orientated language, therefor using a prototypal inheritance (object inherits from another object). Since AngularJS is a JavaScript framework, prototypal inheritance reflects.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype

 

What is a Scope ($scope)

The $scope is the binding part (the glue) between the view (HTML) and the Controller. The $scope is an object with available properties and methods, and available for both the View and the Controller. We could call the $scope the Application Model. Scopes can watch and propagate events.

 

What is a RootScope ($rootScope)

Every application has a single $rootScope object. All other scopes are descendant scopes of the root scope. See the $rootScope as the parent of all other scopes, which can be used to communicate across all the other $scope (see it as a global variable). AngularJS applications only have one $rootScope. The $rootScope is bound to the ng-app directive, and it the hierarchical scope leader.

 

Scope inheritance

In AngularJS a child scope normally prototypically inherits from its parent scope. Any directive using scope: {…} will have an exception to this rule. In this case an ‘isolated scope’ is created, that does not prototypically inherits from its parent. This approach will come in handy when creating “reusable component directives”.

 
In directives, the parent scope is used as default. Meaning that default a directive does not create a new scope (scope:false). If you set scope:true, then prototypical inheritance will be used for that directive.

 
Using scope:{ … } within the directive, will create a new scope which does not prototypically inherit from the parent scope. In this case an ‘isolated scope’ is created. Isolated scopes are interesting when creating “reusable component directive”.

 

Scope creation

• The following create new scopes, and inherit prototypically: ng-repeat, ng-include, ng-switch, ng-view, ng-controller, directive with scope: true, directive with transclude: true.

• The following creates a new scope which does not inherit prototypically: directive with scope: { … }. This creates an “isolate” scope instead.

 

Types of scope

Normal prototypal scope inheritance
ng-include, ng-switch, ng-controller, directives with scope: true

Normal prototypal scope inheritance with a copy/assignment
Each iteration of ng-repeat creates a new child scope, and that newly created child scope always gets a new property.

Isolate scopes
directive with scope: {…}. This one is not prototypal, but ‘=’ (2 way data binding), ‘@’ (passing a string value), and ‘&’ (external function) provide a mechanism to access parent scope properties, via attributes.

Transcluded scopes
directive with transclude: true. This one is also normal prototypal scope inheritance, but it’s also a sibling of any isolate scope.


About the Author

Daan is a Creative-Geek who loves learning and sharing new techniques! Follow him on Twitter to keep up to date with the Creative-Geeks blog and other subjects. Contact him on e-mail : info[at]creative-geeks.com.