AngularJS allows developers to create custom directives to build reusable UI components. By default, directives share the parent scope, but in many cases, we need a directive that works independently. This is where Isolated Scope comes in.
An Isolated Scope ({}) ensures that the directive gets a separate scope, preventing unwanted modifications in the parent scope. It also allows controlled communication between the parent and directive using specific bindings (@, =, &).
1. What is an Isolated Scope?
An Isolated Scope in a directive means:
✔ The directive does not inherit or modify the parent scope.
✔ It can still receive data from the parent using bindings.
✔ It ensures reusability and prevents conflicts.
2. Implementing an Isolated Scope
To create an isolated scope in a directive, use:
scope: {} // Creates an isolated scope
Let’s see how it works with different types of bindings.
3. Isolated Scope with Different Binding Methods
3.1 One-Way Binding (@)
Used to pass string values from the parent scope to the directive.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="MainController">
<isolated-directive message="Hello AngularJS"></isolated-directive>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("MainController", function ($scope) {
$scope.greeting = "Hello AngularJS";
});
app.directive("isolatedDirective", function () {
return {
restrict: "E",
scope: {
message: "@"
},
template: "<p>Directive Message: {{ message }}</p>"
};
});
</script>
</body>
</html>
Explanation:
✔ The directive receives "Hello AngularJS" as a static string.
✔ Changes in the directive do not affect the parent scope.
3.2 Two-Way Binding (=)
Allows the directive to sync data with the parent scope.
Example:
<div ng-controller="MainController">
<input type="text" ng-model="greeting">
<isolated-directive message="greeting"></isolated-directive>
</div>
app.directive("isolatedDirective", function () {
return {
restrict: "E",
scope: {
message: "="
},
template: "<p>Directive Input: <input type='text' ng-model='message'></p>"
};
});
Explanation:
✔ The message property is linked to greeting in the parent.
✔ Any changes inside the directive will update the parent scope and vice versa.
3.3 Function Binding (&)
Allows the directive to execute a function from the parent scope.
Example:
<div ng-controller="MainController">
<isolated-directive action="showAlert()"></isolated-directive>
</div>
app.controller("MainController", function ($scope) {
$scope.showAlert = function () {
alert("Alert from Parent!");
};
});
app.directive("isolatedDirective", function () {
return {
restrict: "E",
scope: {
action: "&"
},
template: "<button ng-click='action()'>Click Me</button>"
};
});
Explanation:
✔ Clicking the button triggers showAlert() in the parent.
✔ The directive can execute functions in the parent but does not modify the parent scope.
4. Summary of Isolated Scope Bindings
| Binding Type | Symbol | Behavior |
|---|---|---|
| One-Way Binding | @ | Passes a string from the parent scope to the directive. |
| Two-Way Binding | = | Synchronizes the data between parent and directive. |
| Function Binding | & | Calls a parent function from the directive. |
5. When to Use an Isolated Scope?
✔ Use isolated scope when you want to create independent, reusable components.
✔ Use @ when passing static values or expressions as strings.
✔ Use = when the directive should modify the parent data.
✔ Use & when the directive needs to trigger a function in the parent.