Directives
Directives are the most powerful building blocks in Angular JS application. The most powerful aspect of Directive is "Scope". Lets deep dive in it....
Scopes in AngularJS
The scope object in Angular JS works as Glue between View and the parts (directives, controllers and services. Whenever the AngularJS application is bootstrapped, a rootScope object is created. Each scope created by controllers, directives and services are prototypically inherited from rootScope.
Scope inside a directive
All directives have a scope associated with them. They use this scope for accessing data/methods inside the template and link function. By default, unless explicitly set, directives don’t create their own scope. Therefore, directives use their parent scope ( usually a controller ) as their own.
However, AngularJS allows us to change the default scope of directives by passing a configuration object known as directive definition object. A directive definition object –DDO – is a simple JavaScript object used for configuring the directive’s behaviour, template.....etc.
Example:
var app = angular.module("myApp",[]);
app.directive("myDirective",function(){
return {
restrict: "EA",
scope: true,
link: function(scope, elem, attr){
// code goes here ...
}
}
});
In the above example, the values of scope property decides how the actual scope is created and used inside a directive. These values can be either “false”, “true” or “{}”.
Different types of directive scopes
There are three types of scopes:
1. Shared scope
2. Inherited scope
3. Isolated scope
Scope: False ( Directive uses its parent scope )
Example: A simple directive to render a div and a textbox that can show and change a name. The name property gets the initial value from the Ctrl1 scope ( parent scope of the directive ).
JavaScript:
var app = angular.module("myApp",[]);
app.controller("Ctrl1",function($scope){
$scope.name = "Krishna";
$scope.reverseName = function(){
$scope.name = $scope.name.split('').reverse().join('');
};
});
app.directive("myDirective", function(){
return {
restrict: "EA",
scope: false,
template: "<div>Your name is : {{name}}</div>"+
"Change your name : <input type='text' ng-model='name' />"
};
});
HTML:
<div ng-app="myApp">
<div ng-controller="Ctrl1">
<h2 ng-click="reverseName()">Hey {{name}}, Click me to reverse your name</h2>
<div my-directive></div>
</div>
</div>
In the above example, If we change the name inside the textbox, notice the header name also gets changed. Since there’s no scope provided in the DDO, the directive uses its parent scope. Therefore, any changes we make inside the directive are actually reflected in the parent scope. Similarly, parent Ctrl1 scope has a method to reverse the name and this gets triggered when we click on the header. Now as we expect, clicking on the header should reverse the name inside the directive too.
Scope: True ( Directive gets a new scope )
When directive scope is set to “true”, AngularJS will create a new scope object and assign to the directive. This newly created scope object is proto-typically inherited from its parent scope ( the controller scope where it’s been used ).
var app = angular.module("myApp",[]);
app.controller("Ctrl1",function($scope){
$scope.name = "Krishna";
$scope.reverseName = function(){
$scope.name = $scope.name.split('').reverse().join('');
};
});
app.directive("myDirective", function(){
return {
restrict: "EA",
scope: true,
template: "<div>Your name is : {{name}}</div>"+
"Change your name : <input type='text' ng-model='name' />"
};
});
First, try clicking on the header. We can see that the name gets reversed inside controller Ctrl1 and the directive. Next, change the name inside the textbox; the parent scope is not at all affected.
Scope : { } ( Directive gets a new isolated scope )
When an object literal is passed to the scope property, A new scope has been created. This new scope also known as Isolated scope because it is completely detached from its parent scope.
Example:
var app = angular.module("myApp",[]);
app.directive("myDirective",function(){
return {
restrict: "EA",
scope: {},
link: function(scope,elem,attr){
// code goes here ...
}
}
});
The recommended way of setting the scope on DDO while creating custom directives. Why in this way -
- It’ll make sure that our directive is generic, and placed anywhere inside the application. Parent scope is not going to interfere with the directive scope.
Though it’s called as an Isolated scope, AngularJS allows to communicate with the parent scope using some special symbols knows as prefixes. Because of course there are still situations where the directive needs to be able to exchange data with parent scope.
