Scope In AngularJS

Jignesh Trivedi
9y
29.1k
0
1

Article

Introduction

$scope in AngularJS is object which refers as an application model. It is object that bind view (DOM element) with the controller. In controller, model data is accessed via $scope object. As we know, AngularJS supports MV* pattern, $scope object becomes the model of MV*.

The $scope is a special JavaScript object. Both View and controller have access to the scope object. It can be used to communication between view and controller. Scope object contains both data and functions. Every AngularJS application have a $rootScope that is the top most scope created on DOM element which contains the ng-app directive. It can watch expressions and propagate events.

Characteristics of scope object

It provide the APIs to observe model (example $watch).
It can be nested, so that it limits access to the properties. Nested scopes are either child scope or isolated scope.
It provide the APIs to propagate any model changes from the outside of "Angular realm" (example $apply).
It provide context against expression to be evaluated.

Scope Inheritance

Scope is controller specific. Every Angular application has only one root scope but may have many child scopes. Some directives create new scope, so that the application may have multiple scopes. Whenever any new scope is created, they are added as child of parent scope. It creates a tree structure.

When Angular evaluates any expression, it first looks at the scope that is associated with current element. If no such property is found it looks into parent scope. This process is recursive until the root scope. This is known as "prototypical inheritance" in JavaScript.

Example

In the following example, I have created three controllers: parentController, firstChildControllerand secondChildController and defined one property in each controller parentName, level1name and level2name respectively. Here controllers are attached with DOM element in a nested way.

As described above, AngularJS evaluates expression with current associated scope and then it search in parent scope and so on until the root scope is reached.

TestAngularJs.html

<!DOCTYPE html>
<html>
<head>
<title>AngularJS Test Application</title>
<script src="angular.js"></script>
</head>
<body ng-app="myapp">
<h2>AngularJS - Scope Inheritance</h2>
<div ng-controller="ParentController">
<div ng-controller="firstChildController">
<div ng-controller="secondChildController">
<p>Parent Name:{{parentName}}</p>
<p>First Child Name:{{level1name}}</p>
<p>Second Child Name:{{level2name}}</p>
</div>
</div>
</div>
<script>
var app = angular.module("myapp", []);
app.controller("ParentController", function ($scope) {
$scope.parentName = "Parent Controller";
});
app.controller("firstChildController", function ($scope) {
$scope.level1name = "First Child Controller";
});
app.controller("secondChildController", function ($scope) {
$scope.level2name = "Second Child Controller";
});
</script>
</body>
</html>

Output

run

Scope Events Propagation

Events can be propagating to the DOM in similar fashion. The events can be emitted or broadcast to scope parents and child respectively.

Example

AngularJS app

var app = angular.module("myapp", []);
app.controller('EventPropagationController', ['$scope', function ($scope) {
$scope.count = 0;
$scope.$on('MyEvent', function () {
$scope.count++;
});
}]);

HTML

<h2>AngularJS - Scope Events Propagation</h2>
<div ng-controller="EventPropagationController">
Root scope "MyEvent"" count: {{count}}
<div ng-controller="EventPropagationController">
<button ng-click="$emit('MyEvent')">Emit - 'MyEvent'</button>
<button ng-click="$broadcast('MyEvent')">Broadcast('MyEvent')</button>
<br>
First level - scope "MyEvent" count: {{count}}
<div ng-controller="EventPropagationController">
Last level - scope "MyEvent" count: {{count}}
</div>
</div>
</div>

Output

Output

Scope Life Cycle

In any JavaScript flow, when browser received an event it executes a corresponding JavaScript callback and browser re-render the DOM object when the callback completes. When browser executes any JavaScript code outside the Angular Context, The AngularJS is unaware about model changes. Using $apply method, model changes can be detected in Angular Context. The $apply method calls $digest after evaluating the expression for examining all of the $watch expressions and compares them with the previous value. There is some specific cycle of scope.

Creation: Using $injector, the root scope is created during application bootstrap. Some of the directive creates new child scope during the template linking.
Watcher registration: The $watch is required to propagate model values to the DOM. Directives register watch on the scope during the template linking.
Model mutation: Using API $apply, mutation to be properly observed.
Mutation observation: At the end of $apply, AngularJS perform $digest on the root scope. It updates all model properties value propagation.
Scope destruction: When child scope is no longer required, child scope is automatically destroyed. This is the responsibility of the child scope creator to destroy them using $scope.$destroy() API. It will stop model propagation and release memory.