Scope in AngularJs Custom Directive

In AngularJs ‘directive’ plays an important role. AngularJs custom directive has many options like replace, scope, transclude etc. Here we will discuss ‘scope’ property.

The scope can have 2 types of value:
1.Boolean
2.Object

1. Boolean :
When scope’s value is false:-
It defaults value. It creates a new scope but just similar to its parent scope means any changes in parent’s scope reflects the directive’s scope and vice versa.

When scope’s value is true:-
It creates a new scope. It is inherited scope and different from parent (controller) scope. If you make some changes in the directive scope then these changes will not reflect in the controller scope. But if you make some changes in parent scope, these changes will reflect in directive scope.

2. Object:
When scope’s value is a blanobject: :-
It creates an isolated scope. But we can access the parent scope.

When scope’s value is like
{
'twoWayBindedTitle':'=newTitle',
'oneWayBindedTitle':'@readOnlyTitle',
'myInternalFunction':'&myParentFunction'
}

Read only access: @ symbol tells that it has read only access. To make a read only variable we need to define as above. Here ‘oneWayBindedTitle’ is the directive scope’s variable and ‘readOnlyTitle’ is the attribute of directive.
Two way binding: = symbol tells that it has read and write both access. To make a two way bind variable we need to define as above. Here ‘twoWayBindedTitle’ is the directive scope’s variable and ‘newTitle’ is the attribute of the directive.
Method binding: Sometimes we need to access the parent scope’s method in directive scope. So using & symbol we can access them in directive scope. To access the parent scope’s method in directive scope need to define it like above. Here ‘myInternalFunction’ is the method in directive scope and ‘myParentFunction’ is the attribute of the directive.

Controller Code:

[js]
$scope.title="Magic of Scope In Directive";
setTimeout(function(){
$scope.title=’Title is changed by Controller scope’;
$scope.$digest();
},3000);
[/js]

Directives Code:

[js]
.directive(‘directiveScopeValueIsFalse’, function () {
return {
scope : false, // we could leave this out, since it’s the default
link : function ($scope, $element, $attrs) {
setTimeout(function(){
$scope.title = ‘Title is changed by Directive scope where scope is false’;
$scope.$digest();
},7000);
}
};
})
.directive(‘directiveScopeValueIsTrue’, function () {
return {
scope : true,
link : function ($scope, $element, $attrs) {
setTimeout(function(){
$scope.title = ‘Title is changed by Directive scope where scope is true’;
$scope.$digest();
},10000);
}
};
})
.directive(‘myComponent’, function () {
return {
restrict:’E’,
scope : {
‘twoWayBindedTitle’:’=newTitle’,
‘oneWayBindedTitle’:’@readOnlyTitle’
},
link : function ($scope, $element, $attrs) {
setTimeout(function(){
$scope.twoWayBindedTitle = ‘Title is changed by Directive scope where scope is object’;
$scope.$digest();
},13000);
},
templateUrl:’component’
};
});
[/js]

Html Code:

[js]

Controller(parent) scope
<h2>{{title}}</h2>
<div>
<h3>Directive Scope — scope= false</h3>
<p>Title——->{{title}}</p>
</div>
<div>
<h3>Directive Scope — scope= true</h3>
<p>Title——> {{title}}</p>
</div>

<h3>Directive Scope —-> scope= Object</h3>
<p>Read Only varible(title):——> {{oneWayBindedTitle}}</p>
<p>Two way Binded variable(title): ——> {{twoWayBindedTitle}}</p>

[/js]

When you will try to run the above mentioned code, the in output values of the variables will be

title=“Magic of Scope In Directive”
oneWayBindedTitle=“Magic of Scope In Directive”
twoWayBindedTitle=“Magic of Scope In Directive”

After 3 seconds:

title=“Title is changed by Controller scope”
oneWayBindedTitle=“Title is changed by Controller scope”
twoWayBindedTitle=“Title is changed by Controller scope”

After 7 seconds:

title=“Title is changed by Directive scope where scope is false”
oneWayBindedTitle=“Title is changed by Directive scope where scope is false”
twoWayBindedTitle=“Title is changed by Directive scope where scope is false”

After 10 seconds:

In Controller and ‘directiveScopeValueIsFalse’ directive Scope:
title=“Title is changed by Directive scope where scope is false”

In ‘directiveScopeValueIsTrue’ directive scope:
title="Title is changed by Directive scope where scope is true"
oneWayBindedTitle=“Title is changed by Directive scope where scope is false”
twoWayBindedTitle=“Title is changed by Directive scope where scope is false”

After 13 seconds:
In Controller and ‘directiveScopeValueIsFalse’ directive Scope:
title=“Title is changed by Directive scope where scope is false”

In ‘directiveScopeValueIsTrue’ directive scope:
title="Title is changed by Directive scope where scope is true"
oneWayBindedTitle=“Title is changed by Directive scope where scope is false”
twoWayBindedTitle=“Title is changed by Directive scope where scope is object”

Hope this will help you to understand the ‘scope’ in Custom Directive.

Read Further on AngularJS Series

• AngularJS : A “Write Less Do More” JavaScript Framework
• AngularJS : Updating a Label Dynamically with User Input
• AngularJS : Adding Items to a JavaScript List and updating corresponding DOM Dynamically
• AngularJS : Text Suggestions
• AngularJS : Sorting objects on various attributes
• AngularJS : Fetching data from the server
• AngularJS : Multiple Views, Layout Template and Routing
• AngularJS : Implementing Routes And Multiple Views
• Building Intuitive Frontend Interfaces with AngularJS