Directives in AngularJS allow developers to create reusable UI components, but managing data between the directive and its parent scope requires an understanding of directive scope.
When creating custom directives, AngularJS provides three ways to manage scope:
- Shared Scope (
false) – Uses the parent scope. - Isolated Scope (
{}) – Creates a separate scope for the directive. - Inherited Scope (
true) – Inherits from the parent scope.
Each type of scope plays a crucial role in controlling data flow within the application.
1. Types of Directive Scopes in AngularJS
1.1. Shared Scope (false)
- The directive shares the parent scope.
- Any changes in the directive affect the parent scope and vice versa.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shared Scope Example</title>
<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">
<p>Parent Message: {{ message }}</p>
<shared-directive></shared-directive>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("MainController", function ($scope) {
$scope.message = "Hello from Parent Scope!";
});
app.directive("sharedDirective", function () {
return {
restrict: "E",
template: "<p>Directive Message: {{ message }}</p>"
};
});
</script>
</body>
</html>
Explanation:
✔ The directive does not define its own scope, so it uses the parent’s scope.
✔ When message is updated in the controller, it also updates in the directive.
1.2. Isolated Scope ({})
- The directive gets a completely separate scope.
- The parent scope and directive scope do not interfere with each other.
Example:
<div ng-controller="MainController">
<p>Parent Message: {{ message }}</p>
<isolated-directive></isolated-directive>
</div>
app.directive("isolatedDirective", function () {
return {
restrict: "E",
scope: {}, // Isolated scope
template: "<p>Directive Message: {{ message }}</p>"
};
});
Explanation:
✔ Even if the parent scope has message, it will not be available inside the directive.
2. Isolated Scope Bindings (@, =, &)
To pass data between the parent scope and an isolated scope directive, AngularJS provides binding properties:
| Symbol | Meaning |
|---|---|
@ | One-way binding (pass string values) |
= | Two-way binding (sync values between directive and parent) |
& | Call a function from the parent scope |
2.1. One-Way Binding (@)
- Passes string values from the parent scope to the directive.
Example:
<div ng-controller="MainController">
<isolated-directive message="Hello AngularJS"></isolated-directive>
</div>
app.directive("isolatedDirective", function () {
return {
restrict: "E",
scope: {
message: "@"
},
template: "<p>Message from Parent: {{ message }}</p>"
};
});
Explanation:
✔ The directive receives a static string from the parent.
✔ Changing the directive’s content will not affect the parent.
2.2. Two-Way Binding (=)
- Passes a variable reference from the parent scope to the directive.
- Changes in the directive reflect in the parent, and vice versa.
Example:
<div ng-controller="MainController">
<input type="text" ng-model="message">
<isolated-directive message="message"></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 directive binds message to the parent scope.
✔ If the user changes the input in the directive, it updates in the parent and vice versa.
2.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 in the directive triggers showAlert() in the parent.
3. Inherited Scope (true)
- The directive inherits the parent scope but does not share it directly.
- Any changes in the directive will not update the parent scope.
Example:
<div ng-controller="MainController">
<inherited-directive></inherited-directive>
</div>
app.directive("inheritedDirective", function () {
return {
restrict: "E",
scope: true,
template: "<p>Inherited Message: {{ message }}</p>"
};
});
Explanation:
✔ The directive gets a copy of the parent scope, not a reference.