Scope in AngularJs Custom Directive

11 / Feb / 2016 by Vineeta Sharma 0 comments

In AngularJs ‘directive’ plays an important role. AngularJs custom directive have many options like replace,scope,transclude etc. Here we will discuss about ‘scope’ property.
Scope can have 2 types of value:
1.Boolean
2.Object

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

When scop’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 blank object :-
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 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:

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

Directives Code:

  .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'
   };
});

Html Code:


   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>

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.

Tag -

FOUND THIS USEFUL? SHARE IT

Leave a comment -