Why use scope in directive and how to use it?

Question

I see so many examples https://docs.angularjs.org/guide/directive and What is the difference between & vs @ and = in angularJS but even I don't understand the scope principe in a directive. It's very confusing to use this. Some examples make use of scope:true; and

scope: {
     sourceObj: '=',
     lookupSource: '@',
     searchRes: '&',
     disableSearch: ''
}

What is using a boolean value (scope:true;) doing exactly?

possible duplicate of [How to Unit Test Isolated Scope Directive in AngularJS](http://stackoverflow.com/questions/17371836/how-to-unit-test-isolated-scope-directive-in-angularjs) — vamsikrishnamannem, May 11 '15 at 19:42

score 1 · Answer 1 · edited Sep 09 '14 at 13:25

It's all about whether or not you want to create an isolated (new) scope for your directive or you want to inherit the from the parent scope. Specifying scope: true is essentially the same as scope: {}. It just says, 'hey, I want my own private scope here'. The only difference between those two is that you can use the object notation to specify your own scope properties to use in your directive.

score 1 · Accepted Answer · answered Sep 09 '14 at 13:28

scope:true

If you set scope:true (instead of scope: { ... }) then prototypical inheritance will be used for that directive. This is not something AngularJS is doing – this is how JavaScript prototypal inheritance works. example

scope:false (default)

the directive does not create a new scope, so there is no inheritance here. This is easy, but also dangerous because, e.g., a directive might think it is creating a new property on the scope, when in fact it is clobbering an existing property. This is not a good choice for writing directives that are intended as reusable components. example

scope: {......}

the directive creates a new isolate/isolated scope. It does not prototypically inherit. This is usually your best choice when creating reusable components, since the directive cannot accidentally read or modify the parent 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. example

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.

NOTE: I dont want now post diferences between scope properties (@,&,=) , it will be another lesson

from this source

Why use scope in directive and how to use it?

2 Answers2