We have discussed about the isolate scope and its basic usage in the previous tutorial. We used {} (object hash) to isolate the scope and it is useful when creating reusable components. Therefore, it will not inherit or modify the data in the parent scope.
Since isolate scope takes an object hash, we can define a set of local properties. These properties are useful for aliasing values for templates.
@or@attr– bind a local scope property to the value of DOM attribute.=or=attr– set up bi-directional binding between a local scope property and the parent scope property of name defined via the value of the attr attribute.&or&attr– provides a way to execute an expression in the context of the parent scope.
In this tutorial, we will be discussing about the isolate scope attribute binding with an example.
Isolate Scope Attribute
The @ or @attr is used to bind a local scope property to the value of DOM attribute. We are going to discuss this property in detail with an example.
Let’s create a directive myEmployee to display the role of an employee and isolate the scope with an empty object. We are not using the '@' property in the following example. We have used a link function to set the scope property to the value of the attribute role in the example.
var app = angular.module('mainApp', []);
app.directive("myEmployee", function() {
return {
restrict: 'E',
scope:{},
template: '<h3> Employee Role : {{role}} </h3>',
link: function(scope,element,attrs){
scope.role = attrs.role;
}
};
});
We have used the myEmployee directive in the following HTML code and passed a string value to the role attribute
<div ng-app="mainApp">
<my-employee role="development"></my-employee>
</div>
You will see the following output in your browser.
Using Isolate Scope ‘@’
We can get rid of the link function in the above example by using isolate scope '@' property to bind the value of the role attribute.
You can bind the scope property to the attribute value simply by using the following syntax.
scope:{
attribute:"@"
}
The following example demonstrates the Isolate scope attribute binding.
var app = angular.module('mainApp', []);
app.directive("myEmployee", function() {
return {
restrict: 'E',
scope:
{
role:"@"
},
template: '<h3> Employee Role : {{role}} </h3>'
};
});
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>AngularJS Isolate Scope</title>
</head>
<body>
<div ng-app="mainApp">
<my-employee role="development"></my-employee>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
You will see the same output in your browser.
Using Isolate Scope ‘@attr’
You can also use @attr property instead of '@' so that you can differentiate the scope properties and attributes by their names. The following example demonstrates this usage and you will see the same output on your browser.
We have set the attribute name of myEmployee directive to myrole. By using @attr, the value of myrole attribute will set to the scope property.
var app = angular.module('mainApp', []);
app.directive("myEmployee", function() {
return {
restrict: 'E',
scope:
{
role:"@myrole"
},
template: '<h3> Employee Role : {{role}} </h3>'
};
});
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>AngularJS Isolate Scope</title>
</head>
<body>
<div ng-app="mainApp">
<my-employee myrole="development"></my-employee>
</div>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</body>
</html>
That’s all for now and we will see more isolate scope features in the coming posts.