The answer is-
“In any application if we want some specific functionality and we want to reuse that in whole application module, then for this we need to develop a set of code. Angular calls it directives.”
I am not going to discuss so much about custom directives basics here. In this blog I am just focusing on use of $scope into directives.
So, when we create a custom directive it has a default scope, which is the parent scope (the controller’s scope from where the directive is called). This behavior is by default, until and unless we do not set the scope.
As we know that whenever we define a directive, there is a “directive definition object” (DDO), in which we set some parameters like- restrict, template, require, scope etc.
In this blog I will talk about the scope properties, they are false, true, {}.
Let’s discuss them one by one.
Scope : false (Shared Scope)
In layman language false is assumed as no, so if the scope is set to false, then it means use parent scope in the directive and do not create a new scope for the directive itself. It just uses the scope of respective controller. So let us suppose if we have a controller named “homeController” and a directive “printName”, then in printName directive we will get parent scope by default and any change in scope values, either child or parent, will reflect in both.
Scope : true (Inherited Scope)
Using this property, the directive will create a new scope for itself. And inherit it from parent scope. If we do any changes to the controller scope it will reflect on directive scope, but it won’t work the other way around. This is because both of them use their own copies of scope object.
Scope : {} (Isolated Scope)
One of the important features, its called isolated scope. Here too the directive will create a new scope object but it is not inherited by the parent scope, so now this scope doesn’t know anything about the parent scope.
But the question arises, if we do not have the link from parent scope then how can we get the values from it, and how can we modify it ?
The answer is- set the objects property into DDO, but for this it is necessary to set on attributes into the directive.
In isolated scope we use three prefixes which helps to bind the property or methods from the controller (parent scope) to directive (isolated scope). Lets understand how this works.
Whenever a directive finds any prefixes in its scope property in DDO, it checks it in directive declaration (in html page where the directive is called) with attribute declared on this element. We can also change the name by giving a separate attribute name after any of the prefixes.
These are @, =, &
‘@’ : One way binding
One way binding means a parent sending anything to the directive scope through the attribute, gets reflected in the directive. But if any change in the directive happens it will not reflect in parent. The @ is used to pass string values.
‘=’ : Two way binding
This is called two way binding, because the parent scope will also reflect to directive scope vice-versa.
It is used for passing object to the directive instead of string. This object could be changed from both sides, from parent or from directive. That is why it is called two-way.
‘&’ : Method binding
Used to bind any parent’s method to directive scope. Whenever we want to call the parent methods from the directive we can use this. It is used to call external (outside of current scope) functions. Overall “&” is used to pass data as a function or method.
In this example the directive creates a property inside its local scope, that is swapData. We can also understand swap as an alias for swapData. So we pass a method to ‘&’ which is then invoked by the directive whenever required.
Summarizing, Shared scope (sharing the same scope and data, can not pass the data explicitly), Inherited scope (parent scope values can be fetched into child but child means directive scope will not effect parent), Isolated scope (both controller & directive do not share the scope & data, we can explicitly pass the data using some parameters that is @, & ,= ).
