Blog Detail

$scope behaviour in the directives.

Posted by Hitesh Jariwala On 11 Jan 2017

What is Directive?

In Any application, if some specific functionality is required, which is needed to be reused in any other application, then for that one need to develop set of  codes which is known as Directive.

Note: It is assumed that reader of this blog already have sufficient knowledge of directive, So this blog focuses only on usage of $scope into directive.

 

Scopes in AngularJS

$scope has a very important role in AngularJS, it works as a mediator between the Controller & View in an Angular. Each scope object created by controller or any other directive or service are inherited from rootScope

 

$scope into directive

All directive have a scope associated with it. Directive use scope for accessing data & Methods inside the template and link function. Directive never create its own scope unless explicitly set. by default directive use their parent scope(from where its call)

We can change the default scope of the directive using scope property just like restrict, template, etc. the value of scope property define how scope of directive is behave. we can define scope property by 3 ways, following are different scenario of using scope inside directive:

• The scope is not assigned or set as false

• The scope set as true

• Isolated scope

 

Scope: false ( Directive uses its parent scope )

This is default value of scope in directive. when we declare scope: false in DDO (directive definition object) at that time the directive has the same scope as its parent controller. 

 

 

 

in above example if we change name in textbox it also change header value because of directive use parent controller scope so any changes inside directive are reflected in the controller scope (Parent scope) same as any change in controller also reflected in directive.

 

Scope: true (Directive gets a new scope)

When we declare scope: true in DDO at that time directive define its own scope. This new scope inherited from its parent controller scope. In this case scope binding flow is one direction only from parent to directive scope so any change in directive not reflected in parent scope but when we change parent scope it reflect in directive scope 

 

<iframe width="100%" height="300"

src="//jsfiddle.net/hitusam/4ja2m35z/6/embedded/"

allowfullscreen="allowfullscreen" frameborder="0"></iframe>

 

In above example if we change name in header textbox then it reflect in directive scope but when we change in directive scope it not reflect in parent scope, if you want to reflect parent scope then you need to use $parent for that

 

Scope: { } (Directive gets a isolated scope )

When we declare scope: {} as a object in DDO then directive will create a new isolated scope. and scope is not inherited from parent scope. so if we want to access parent scope values then we need to declare as a scope property in DDO and that property assignee through directive attributes.

 

In isolated scope we can define scope property by using three prefixes. These are

@ : One way binding 

=  : Two way binding ,

& : Method binding 

<iframe width="100%" height="300" src="

//jsfiddle.net/hitusam/8sb1xbLn/2/embedded/"

allowfullscreen="allowfullscreen" frameborder="0"></iframe> 

 

In above example if we change name in parent scope so its reflect in directive scope but if we change name in directive scope then it's not reflect in parent scope due to one way binding, same as if we change last name in parent scope it  reflect in directive scope and also if we change last name in directive scope then it reflect in parent scope due to two way binding. same as we can also pass method of parent scope in directive scope and call from directive.