AngularJS ScopesBy: Mohamed Elkhodary

DefinitionWhat is the scope?

What is the Scope?• In the Model-View-Controller structure, scope object is the model.• Scope is just a JavaScript object.• Both the controller and the view have access to the $scope • Scope can be used for communication between the controller and the view.

• Scope object will house both the data and the functions that will be used in the view.

What is the Scope?• Provides an execution context that is bound to the DOM element

(and its children).• It is an execution context for expressions.• For example {{username}} expression is meaningless, unless it is evaluated

against a specific scope which defines the username property

• Scopes can watch expressions and propagate events.

Scope InheritancePrototypical inheritance

Scope Inheritance• Scopes are arranged in hierarchical structure which mimic the DOM

structure of the application.• All AngularJS apps have a $rootScope. The $rootScope is the top-most

scope that is created on the DOM element that contains the ng-app directive.• All scopes are created with prototypal inheritance, meaning that they

have access to their parent scopes.• By default, for any property that AngularJS cannot find on a local

scope, AngularJS will crawl up to the containing (parent) scope and look for the property or method there until it reaches the $rootScope.

The one exceptionSome directives can optionally create an isolated scope and do not inherit from

their parents.

Scope Inheritance• Directives by default do not create a new scope. (i.e. Scope: false).• The following create new scopes:• ng-repeat• ng-include• ng-switch• ng-view• ng-controller• Directive with scope: true• Directive with transclude: true

Directives (Will be covered in details in another presentation)

• Default (scope: false)• The directive does not create a new scope, so there is no inheritance here.• Directive may think it is creating a new property on the scope, when in fact it is changing an existing property.• It is not intended as reusable components.

• Scope: true• The directive creates a new child scope that prototypically inherits from the parent scope.

• Scope: {…}• The directive creates a new isolate/isolated scope. It does not prototypically inherit.• The directive cannot accidentally read or modify the parent scope• Best choice when creating a reusable component.• Set up two-way binding (using '=')• One-way binding (using '@') between the parent scope and the isolate scope. • '&' to bind to parent scope expressions.

• Transclude: true• the directive creates a new "transcluded" child scope, which prototypically inherits from the parent scope.

Scope as Data-ModelLet’s try a Plunker example: https://embed.plnkr.co/dbCEOw/

Scope HierarchiesLet’s try a Plunker example: https://embed.plnkr.co/7K6j12/

Retrieving Scopes from the DOM

Retrieving Scopes from the DOM• To examine the scope in the debugger:• Right click on the element of interest in your browser and select 'inspect

element'. You should see the browser debugger with the element you clicked on highlighted.• The debugger allows you to access the currently selected element in the

console as $0 variable.• To retrieve the associated scope in console execute:

angular.element($0).scope() or just type $scope

Scope Events PropagationLet’s try a Plunker example

Scope Life CycleUnderstanding AngularJS Scope Life Cycle

Scope Life Cycle1. Creation

1. The root scope is created during the application bootstrap by the $injector.2. During template linking, some directives create new child scopes.

2. Watcher registration1. During template linking directives register watches on the scope. 2. These watches will be used to propagate model values to the DOM.

3. Model mutation1. For mutations to be properly observed, you should make them only within the scope.$apply(). 2. Keep in mind that in most places (controllers, services) $apply has already been called for you by the directive which is handling the event.3. An explicit call to $apply is needed only when implementing custom event callbacks, or when working with third-party library callbacks.

4. Mutation observation1. At the end of $apply, Angular performs a $digest cycle on the root scope, which then propagates throughout all child scopes. 2. During the $digest cycle, all $watched expressions or functions are checked for model mutation and if a mutation is detected, the $watch listener is

called.

5. Scope destruction1. When child scopes are no longer needed, it is the responsibility of the child scope creator to destroy them via scope.$destroy() API. 2. This will stop propagation of $digest calls into the child scope and allow for memory used by the child scope models to be reclaimed by the garbage

collector.

Scope Life Cycle

References• https://docs.angularjs.org/guide/scope• https://github.com/angular/angular.js/wiki/Understanding-Scopes • https://www.ng-book.com/p/The-Digest-Loop-and-apply/

Thank You