Isolated Scope In AngularJS

Introduction

Scope in AngularJS inherits from Parent Scope default. But, sometimes it is not required specially in the case of development of some common components. In this case directive should not read or write properties value in the parent scope by mistake. So, Isolated Scope came into picture.

 

Isolated scope does not prototypically inherit from the parent scope. It can access its parent scope through the $parent property.  So, Directive has three options for isolating its scope from parent scope. The following are the three options:

1. scope: false - It is default in Directive. It lets to reuse the scope from the place where the component is being used. 
2. scope: true - It creates a child scope. This child scope prototypically inherits from the scope where the component is being used. 
3. scope: {...} - It creates Isolates scope. It does not prototypically inherit from the scope where the component is being used.

Isolated scope completely decouples component or template from the rest of the application or a place where it is being used. The following is the figure related to Isolated scope concept:

1. scope: true 
   
   Parent Scope <<======prototype======  Child Scope
                            <<====== $Parent ======   Child Scope
   
   
2. scope: {}
   
   Parent Scope <<=====$Parent Scope ========= Isolates Scope 

There are three types of interface to specify between the element's attributes and the isolated scope: 

1. interpolate (@)
2. data bind (=)
3. expression (&) 

These interfaces can be specified as key-value pairs on the scope property of the Directive on the element like the following:

scope:
{
   myValue1 : '@attribute1',
   myValue2:   '=attribute2',
   myValue3:    '&attribute3'

}

So, we can interact with Isolated scope in three ways.  Here's the explanation:

Attributes or Interpolate (@)

 

An Isolated scope property can be bind with DOM attributes. Interpolate or attribute sets up a one-way data binding from the Parent scope to the Isolated Scope of Directive. It means if Parent scope does any changes then changes will be reflected to the Isolated scope of Directive. But it will not reflect changes from Isolated scope to Parent scope.

 

Example:

.directive('myDirective', function () {
    return {
        scope:{
            myAttribute:'@',
        }
    };
})

Now, use the above Directive 'myDirective' like below to DOM:

<my-directive my-attribute="{{Hello Geeks}}"></my-directive>

Binding (=)

 

Binding works almost exactly like the attribute except that it provides two-way mode binding. It means changes can be seen from Parent to Isolated scope and vice-verse.

 

Example:

.directive('myDirective', function () {
    return {
        scope:{
            myBinding:'=',
        }
    };
})

Expression (&)

Expression is used to call a function on the Parent scope from the Isolated Scope. It is useful to create callbacks from the Directive component.

 

Example:

 

Directive

.directive('myDirective', function () {
    return {
        scope:{
            myIsolatedFunction:'&'
        }
    };
})

Now, use into DOM:

<input ng-model="myIsolated">
<button class="myButton" ng-click="myIsolatedFunction({myValue:myIsolated})">Click OK</button>

Now, the method call backs into controller like the following:

.controller('myTestController', ['$scope', function ($scope) {
    $scope.myUpdatedValue= function (myValue) {
        $scope.updatedValue= myValue;
    }
}]);

Conclusion

 

So, Isolated Scope concept is very important feature of AngularJS Directive. The usage of Isolated scope ensures that the scope inside and outside of Directive component will not contaminate each other. It is very useful and important because we don't want properties on the Parent scope affecting or being affected by what we do inside the control or template.

So, before developing any template or control by using Directive always try to focus on the concept of "Isolated Scope".