I would like to explain the concepts from the perspective of JavaScript prototype inheritance. Hopefully help to understand.
There are three options to define the scope of a directive:
scope: false: Angular default. The directive's scope is exactly the one of its parent scope (parentScope).
scope: true: Angular creates a scope for this directive. The scope prototypically inherits from parentScope.
scope: {...}: isolated scope is explained below.
Specifying scope: {...} defines an isolatedScope. An isolatedScope does not inherit properties from parentScope, although isolatedScope.$parent === parentScope. It is defined through:
app.directive("myDirective", function() {
return {
scope: {
... // defining scope means that 'no inheritance from parent'.
},
}
})
isolatedScope does not have direct access to parentScope. But sometimes the directive needs to communicate with the parentScope. They communicate through @, = and &. The topic about using symbols @, = and & are talking about scenarios using isolatedScope.
It is usually used for some common components shared by different pages, like Modals. An isolated scope prevents polluting the global scope and is easy to share among pages.
