In AngularJS, directives are a powerful feature that allows developers to build reusable UI components. However, by default, directives share the parent scope, which can lead to unintended side effects. To manage data flow properly, we use an isolated scope (scope: {}) and define bindings using:
@(One-way binding for Strings)=(Two-way data binding)&(Function binding for callbacks)
These bindings define how the directive interacts with the parent scope and ensures controlled communication. Let’s explore each binding in detail.
1. @ (One-Way Binding for Strings)
The @ symbol is used to pass string values from the parent scope to the directive.
Example – Using @ Binding
We will create a directive that accepts a title as a string from the parent scope.
HTML Code:
<!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">
<custom-title title="Welcome to AngularJS"></custom-title>
</div>
<script>
var app = angular.module("myApp", []);
app.controller("MainController", function ($scope) {
$scope.pageTitle = "Welcome to AngularJS";
});
app.directive("customTitle", function () {
return {
restrict: "E",
scope: {
title: "@"
},
template: "<h2>{{ title }}</h2>"
};
});
</script>
</body>
</html>
Explanation:
✔ The parent passes a string ("Welcome to AngularJS") to the directive using title="...".
✔ The directive receives and displays the string in its template (<h2>{{ title }}</h2>).
✔ Changes in the directive do not affect the parent scope.
When to use @?
When passing static text or expressions as string values to the directive.
2. = (Two-Way Binding)
The = symbol allows the directive to synchronize data with the parent scope.
Example – Using = Binding
We will create an input field in the directive that updates the parent’s data dynamically.
HTML Code:
<div ng-controller="MainController">
<input type="text" ng-model="username">
<data-binding name="username"></data-binding>
</div>
JavaScript Code:
app.controller("MainController", function ($scope) {
$scope.username = "John Doe";
});
app.directive("dataBinding", function () {
return {
restrict: "E",
scope: {
name: "="
},
template: "<p>Enter Name: <input type='text' ng-model='name'></p>"
};
});
Explanation:
✔ The username variable in the parent is linked to name inside the directive.
✔ Any change in the directive’s input field updates username in the parent and vice versa.
When to use =?
When the directive needs to modify and sync data with the parent scope.
3. & (Function Binding for Callbacks)
The & symbol is used when the directive needs to execute a function from the parent scope.
Example – Using & Binding
We will create a button inside the directive that triggers a function in the parent scope.
HTML Code:
<div ng-controller="MainController">
<custom-button action="showAlert()"></custom-button>
</div>
JavaScript Code:
app.controller("MainController", function ($scope) {
$scope.showAlert = function () {
alert("Hello from Parent Scope!");
};
});
app.directive("customButton", function () {
return {
restrict: "E",
scope: {
action: "&"
},
template: "<button ng-click='action()'>Click Me</button>"
};
});
Explanation:
✔ Clicking the button triggers showAlert() in the parent scope.
✔ The directive executes the function but does not modify the parent scope.
When to use &?
When the directive needs to call a function from the parent scope, such as event handlers.
4. Summary of @, =, and & Bindings
| Binding Type | Symbol | Behavior | Use Case |
|---|---|---|---|
| One-Way Binding | @ | Passes a string from the parent to the directive. | When passing static text or expressions. |
| Two-Way Binding | = | Synchronizes data between parent and directive. | When the directive modifies parent data. |
| Function Binding | & | Calls a function from the parent scope. | When the directive triggers parent functions. |
5. Real-World Use Case Example
Let’s build a User Profile Card directive that:
Accepts user details using @.
Allows the user to edit their name with =.
Calls a save function when the button is clicked using &.
HTML Code:
<div ng-controller="MainController">
<user-card name="username" age="30" save-action="saveUser()"></user-card>
</div>
JavaScript Code:
app.controller("MainController", function ($scope) {
$scope.username = "John Doe";
$scope.saveUser = function () {
alert("User saved: " + $scope.username);
};
});
app.directive("userCard", function () {
return {
restrict: "E",
scope: {
name: "=",
age: "@",
saveAction: "&"
},
template: `
<div style='border: 1px solid #ddd; padding: 10px; width: 200px;'>
<h3>User Profile</h3>
<p>Name: <input type="text" ng-model="name"></p>
<p>Age: {{ age }}</p>
<button ng-click="saveAction()">Save</button>
</div>
`
};
});
How It Works:
✔ @ → The age is passed as a string (age="30").
✔ = → The name is editable (ng-model="name") and updates the parent scope.
✔ & → Clicking “Save” triggers saveUser() in the parent scope.