Why should I use Isolated scope?

Question

I'm creating a directive which needs some data from the parent controller. Putting the data in the controller in scope like $scope.data = myData; makes the data accessible in the directive. I saw that the for passing data from controller to directive we use isolated scope. But here why should I use isolated scope for this. ? Is it just for standardization purpose ?

Answer 1

Isolate scope make the components reusable and permit to control the binding : either one-way or two-way.

If you use a inherited scope, that means you will search the value on parent's scope, which reduce the reusability of your components. How will you be able to use twice the same components with different data while using data from parent's scope ? You just can't.

Note that you can also use attributs (attrs param in link function) to read values. But it's require always to watch for changes in order to refresh your component's view. When you use binding you don't need too, unless you have some specific process.

AS an example, let's say you create a directive to make a text bold. If you use a isolated scope you will have to do the following :

scope:{
   text:'@myText'
}, 
template : <strong>{{text}}</strong>

Now if you use attributes you will have to do this :

scope:false, 
template : <strong>{{text}}</strong>
link:function(scope, element, attrs){
    attrs.$observe('myText', function(newValue){
       scope.text = newValue;
    });
}

Which make you writing more code, instead of relying of angularJS, so more chance to inserts bugs.

EDIT : here's another post with quite a good answer about interpolation and parsing : Using $attrs to evaluate attribute with curly braces in it

Answer 2

JavaScript code:

var app = angular.module("test",[]);

app.controller("Ctrl1",function($scope){
    $scope.name = "Harry";
    $scope.reverseName = function(){
        $scope.name = $scope.name.split('').reverse().join('');
    };
});
app.directive("myDirective", function(){
    return {
        restrict: "EA",
        scope: {},
        template: "<div>Your name is : {{name}}</div>"+
        "Change your name : <input type='text' ng-model='name'/>"
    };
});

HTML:

<div ng-app="test">
    
    <div ng-controller="Ctrl1">
        <h2 ng-click="reverseName()">Hey {{name}}, Click me to reverse your name</h2>
        <div my-directive class='directive'></div>
    </div>
</div>

We just created a directive with an isolated scope. Notice, even the parent scope has a name “Harry”, the textbox inside directive is blank. This is because of the new Isolated scope doesn’t know anything about its parent scope.

But, can we pass some values from the parent scope to the directives now?

Yes ! Not only that, we might need to handle situations like invoking callbacks in parent scope, two-way binding between parent & directives scope ..etc

To access any parent scope data, we need to pass that to our directive explicitly. This is achieved by setting properties on the scope object in the DDO. Imagine these properties as interfaces of the directive to communicate with outside scope. Another important thing is that, these properties also MUST be set as the attributes of the directive html element.

Look at the directive template and we can see the scope properties are used there. Mostly the directive’s templates and link function are going to consume the scope properties. The behavior of these properties again depends on their values –– also known as Prefixes –– provided. These Prefixes are used to bind the parent scope’s methods and properties to the directive scope.

1. "@" ( Text binding / one-way binding )
2. "=" ( Direct model binding / two-way binding )
3. "&" ( Behaviour binding / Method binding )

The “@” prefix is a one-way binding between the directive scope and parent scope. It always expects the mapped attribute to be an expression. This is very important; because to make the “@” prefix work, we need to wrap the attribute value inside {{}}. Since “@” is creating a one-way binding between the parent and directive scope, any changes made in the parent scope will reflect inside the directive scope, but not the other way. “@” prefix is really useful when our directive needs to be initialised with some data from parent scope.

Secondly we have the “=” prefix. It creates a two-way binding between the parent and directive scope. The most important point about “=” prefix is, it’ll always expect the attribute value to be the model name. That means you cannot provide an expression as the value of attribute mapped to “=” prefix. This is useful, when any of our directive scope property to be same as the parent scope property.

Finally, we’re going to talk about the last prefix. The “&” prefix is also known as a method binding. This is used to bind any methods from the parent scope to the directive scope. This will be particularly useful when our directive needs to execute any callbacks in the parent scope. Look at the code to see how attribute value for the “&” prefix to be set.

Please refer below link to get insight of isolated scope in angular JS.

https://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/